話說。一寫博客還有些莫名的興奮感……

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

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

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

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

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

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

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

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

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

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

簡述浮動和定位：

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

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

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

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

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

（之後有詳述~~~）

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

CSS （二）解析CSS盒子