CSS （二）解析CSS盒子

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

這幾天一直擠時間

css盒子，一開始聽起來還有點高大上的趕腳。後來了解之後，發現其實很容易理解。從

功能上講很方便，但真正做好熟練運用就並不是那麼很容易了。

它作為div的核心部分，可以說統治了大部分前台，其中比較不容易做好的主要是「浮動」和「相對/絕對定位」問題。

先系統說一下css盒子到底是什麼。請看下圖。

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

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

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

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

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

簡述浮動和定位：

浮動：浮動主要是幫助物件在網頁中對齊的。如，某塊級元素很小，卻佔了一行，我們想讓他挪到上邊一行去，這時就要用浮動了。

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

定位：定位分為靜態和動態兩類，靜態（絕對定位）是「貢獻的」，即它移走之後允許別人取代自己位置；同時它的定位以父級為參考的，反映在**中即body。動態（相對定位）是「自私的」，它移走後也不允許別人取代自己原來的位置；它以自己為參考。（之後有詳述~~~）

小結：css盒子我們可以把它分解為兩方面來學習：一方面是它的實現原理，另一方面是它的控制應用。原理體現在css+div設計思想中，應用體現在web排版和設計上。