CSS盒子模型

CSS （Cascading Style Sheet）可譯為“層疊樣式表 ”或“級聯樣式表”，它定義如何顯示HTML 元素，用於控制Web頁面的外觀。通過使用CSS實現頁面的內容與表現形式分離，極大提高了工作效率。CSS 假定所有的HTML 文檔元素都生成了一個描述該元素在HTML文檔佈局中所佔空間的矩形元素框，可以形象地將其看作是一個盒子。CSS 圍繞這些盒子產生了一種“盒子模型”概念，通過定義一系列與盒子相關的屬性，可以極大地豐富和促進各個盒子乃至整個HTML文檔的表現效果和佈局結構。對於是盒子的元素，如果沒有特殊設置，其默認總是佔獨立的一行，寬度為瀏覽器窗口的寬度，在其前後的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着進行排列。HTML文檔中的每個盒子都可以看成是由從內到外的四個部分構成，即內容區（content）、填充(padding)、邊框(border)和空白邊(margin)。 CSS 為四個部分定義了一系列相關屬性，通過對這些屬性的設置可以豐富盒子的表現效果。

內容區是盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區有三個屬性，width、height 和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度，當內容信息太多，超出內容區所佔範圍時，可以使用overflow 溢出屬性來指定處理方法。當overflow 屬性值為hidden時，溢出部分將不可見；為visible時，溢出的內容信息可見，只是被呈現在盒子的外部；當為scroll時，滾動條將被自動添加到盒子中，用户可以通過拉動滾動條顯示內容信息；當為auto時，將由瀏覽器決定如何處理溢出部分。

填充是內容區和邊框之間的空間。填充的屬性有五種 ，即padding -top、padding -bottom、padding -left、padding-right 以及綜合了以上四種方向的快捷填充屬性padding。使用這五種屬性可以指定內容區信息內容與各方向邊框間的距離。設置盒子背景色屬性時，可使背景色延伸到填充區域。

邊框是環繞內容區和填充的邊界。邊框的屬性有border-style、border-width和border-color 以及綜合了以上三類屬性的快捷邊框屬性 border。border-style 屬性是邊框最重要的屬性，如果沒有指定邊框樣式，其他的邊框屬性都會被忽略，邊框將不存在。CSS規定了dotted（點線）、dashed（虛線）、solid(實線)等九種邊框樣式。使用border-width屬性可以指定邊框的寬度，其屬性值可以是長度計量值，也可以是CSS規定的thin、medium 和thick。使用border-color屬性可以為邊框指定相應的顏色，其屬性值可以是RGB值，也可以是CSS 規定的17個顏色名 。在設定以上三種邊框屬性時，既可以進行邊框四個方向整體的快捷設置，也可以進行四個方向的專向設置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。設置盒子背景色屬性時，在IE中背景不會延伸到邊框區域，但在FF等標準瀏覽器中，背景顏色可以延伸到邊框區域，特別是單邊框設置為點線或虛線時能看到效果 ^[1]  。

空白邊位於盒子的最外圍，是添加在邊框外周圍的空間。空白邊使盒子之間不會緊湊地連接在一起，是CSS 佈局的一個重要手段。空白邊的屬性有五種 ，即margin-top、margin-bottom、margin- left、margin-right以及綜合了以上四種方向的快捷空白邊屬性margin，其具體的設置和使用與填充屬性類似。對於兩個相鄰的（水平或垂直方向 ）且設置有空白邊值的盒子，他們鄰近部分的空白邊將不是二者空白邊的相加，而是二者的並集。若二者鄰近的空白邊值大小不等，則取二者中較大的值。同時，CSS 容許給空白邊屬性指定負數值，當指定負空白邊值時，整個盒子將向指定負值方向的相反方向移動，以此可以產生盒子的重疊效果。採用指定空白邊正負值的方法可以移動網頁中的元素，這是CSS 佈局技術中的一個重要方法。

文檔流指文檔中能夠明確顯示對象在排列時所佔用的具體方位。文檔流不但是盒子模式定位的基礎所在，它也是HTML中默認的網頁佈局模式，在沒有特殊要求的情況下，頁面中的塊狀元素呈現自上而下的動態分佈形式，內聯元素則是按照從左到右的方式存在。如果我們想要改動某一漢字或是符號在網頁中的具體方位，只能有一種方式可以選擇，就是通過操作網頁結構中漢字或是符號的先後位置和分佈位置來實現自己的目的和想法。

所謂浮動就是讓設置的標籤產生漂浮效果，脱離原來在頁面本應出現的空間位置，不再佔用任何文檔流空間。元素設置為浮動以後，會生成一個塊級元素，而不論它本身是何種元素。且要指明一個寬度，否則它會盡可能地窄；另外當可供浮動的空間小於浮動元素時，它會跑到下一行，直到擁有足夠放下它的空間。

頁面佈局使用最多的是相對定位和絕對定位。

相對定位：這種定位方式下元素不脱離文檔流，仍然保持其未定位前的形態並且保留它原來所佔空間。偏移時以自身位置的左上角作為參照物，通過left、top、right和bottom四個方向的屬性來定義偏移的位置。下面通過比較定位前和定位後的兩種狀態來分析相對定位的效果。

絕對定位：這種定位方式下元素將脱離文檔流，不佔據空間，文檔流中的後續元素將填補它留下的空間。下面通過比較定位前和定位後的兩種狀態來分析絕對定位的效果 ^[2]  。