CSS （二）解析CSS盒子

標籤：排列   瞭解   設計   是什麼   它的   代碼   圖片   對齊   enter   

      話說。一寫部落格還有些莫名的興奮感……

      這幾天一直擠時間忙於趕牛腩視頻，遲到的CSS盒子。請諒解。    

      CSS盒子，一開始聽起來還有點高大上的趕腳。

後來瞭解之後，發現事實上非常easy理解。從功能上講非常方便，但真正做好熟練運用就並非那麼非常easy了。

      它作為div的核心部分。能夠說統治了大部分前台，當中比較不easy做好的主要是“浮動”和“相對/絕對位置”問題。

      先系統說一下CSS盒子究竟是什麼。請看。

      

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDE5MTI0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

      我們先想一個現實生活中真實的紙盒子。盒子裡裝著燈泡。

      首先。這個盒子本身肯定是有厚度的，即border。燈泡易碎，要和盒子有個保護層起緩衝作用，保護層即padding。我們運送這個盒子時。要盡量不合其它易碎品或能產生強大壓力的東西緊挨著。要有一個隔離空間。即margin；我們的燈泡就是盒子裡的content。

      看到這，大家想必都明確了盒子是什麼東西。那究竟它在web頁面設計中是怎麼發揮作用的？與css有什麼關係？為什麼它會產生並得到廣泛應用？

      實際上，用css+div開發web頁面時，頁面上的圖片、行/段落文字、button等事實上都是一個個盒子排列組合而成的，在代碼裡存在於div塊中。css就是控制這些盒子怎麼放、放在哪、以什麼形式放的“控制器”。即。實現了結構和表現的分離。

      和傳統的表格和表格的嵌套來定位來排版網頁內容相比，顯然更具有了靈活性和易操作性。

     

      簡述浮動和定位：

      浮動：浮動主要是協助對象在網頁中對齊的。

如。某區塊層級元素非常小。卻佔了一行，我們想讓他挪到上邊一行去。這時就要用浮動了。

      它分為none，左/靠右對齊。盒子內嵌套等多種情況。欲知詳情。下篇部落格會為大家說明。

      定位：定位分為靜態和動態兩類。靜態（絕對位置）是“貢獻的”，即它移走之後同意別人代替自己位置；同一時候它的定位以父級為參考的。反映在代碼中即body。

動態（相對定位）是“自私的”，它移走後也不同意別人代替自己原來的位置。它以自己為參考。

（之後有詳述~~~）

 

      小結：CSS盒子我們能夠把它分解為雙方面來學習：一方面是它的實現原理，還有一方面是它的控制應用。原理體如今css+div設計思想中，應用體如今web排版和設計上。

      

     

 

 

 

 

 

 

 

 

 

 

 

      

CSS （二）解析CSS盒子