CSS布局模型盒

CSS布局是一種新興的布局方式，其又被稱作CSS+DIV(事實上應為CSS+XHTML)布局。其最大的優點是用CSS為網站設計的塊狀對象添加定位屬性，將其轉換為AP元素后，可以將該對象放置在網頁任何地方，并且可以設置這些塊狀對象的層疊順序。使用這種方式，可以將網頁每個圖像、每段文本、每個表格都添加進由CSS定義的塊狀對象中，以實現靈活的、多樣化的布局方式.CSS定義的AP元素還可以與JavaScript等腳本語言結合，制作出各種動態效果。

Css盒模型(Box Model)是用來描述CSS中塊狀對象的一種模型。通過該模型，可以將CSS的塊狀對象的各種屬性十分貼切、形象地表現出來，以協助網頁設計者理解CSS塊狀布局的原理。盒模型是CSS布局的基礎。

1.盒模型的結構

在CSS中，所有的塊狀對象都被視為一個矩形框。該矩形框的所有與位置相關的屬性都被視為盒模型的一部分。盒模型的結構如圖4-5所示。

CSS定義的塊狀對象都包括邊界區、邊框、填充區和內容4個部分。使用CSS可以定義這些區域的大小，而不影響塊狀對象的內容。在網頁中，標準的CSS塊狀對象高度計算公式如下所示。



而標準的Css塊狀對象寬度計算公式則如下所示。


理解了網頁的塊狀對象高度和寬度的計算方法，就可以根據這些方法來定義這些對象在網頁中的排列方式。

2.邊界

在Css中，邊界又被稱作外補丁。定義塊狀對象的邊界，需要使用復合屬性margin以及其4種子屬性，如表4-25所示。



使用不帶復合屬性的margin屬性也可以為網頁對象設置4邊的邊界值。其方法是為margin屬性設置多個屬性值。為margin屬性設置兩個屬性值時，其第I個屬性值定義網頁對象頂部和底部的邊界，而第2個屬性值定義網頁對象左側和右側的邊界，其代碼如下所示。



為margin屬性設置3個屬性值時，其第1個屬性值定義網頁對象頂部的邊界，個屬性值定義網頁對象左側和右側的邊界，第3個屬性值定義網頁對象底部的邊界，代碼如下所示。



為margin屬性設置4個屬性值時，其4個屬性值分別定義網頁對象的頂部、右側、底部和左側的邊界寬度，其代碼如下所示。



3.填充

在Css中，填充又被稱作內補丁。定義塊狀對象的填充，需要使用復合屬性padding以及其4種子屬性，如表4-26所示。



使用不帶復合屬性的padding屬性也可以為網頁對象設置4邊不同的填充值。其方法是為padding屬性設置多個屬性值.為padding屬性設置兩個屬性值時，其第l個屬性值定義網頁對象頂部和底部的填充，而第2個屬性值定義網頁對象左側和右側的填充，其代碼如下所示。



為margin屬性設置3個屬性值時，其第1個屬性值定義網頁對象頂部的填充，第2個屬性值定義網頁對象左側和右側的填充，第3個屬性值定義網頁對象底部的填充，其代碼如下所示。



為margin屬性設置4個屬性值時，其4個屬性值分別定義網頁對象的頂部、右側、底部和左側的填充寬度，其代碼如下所示。