CSS布局是一種新興的布局方式，也叫CSS+DIV（其實應該是CSS+XHTML）布局。它最大的優(yōu)點是利用CSS為網(wǎng)站設計的塊對象添加定位屬性。將它們轉換成AP元素后，就可以將對象放置在網(wǎng)頁的任意位置，并且可以設置這些塊對象的堆疊順序。這樣，網(wǎng)頁的每張圖片、每段文字、每張表格都可以添加到CSS定義的塊對象中，實現(xiàn)靈活多樣的布局方式。 CSS定義的AP元素還可以與JavaScript等腳本語言結合，產(chǎn)生各種動態(tài)效果。

CSS盒模型（Box Model）是CSS中用來描述塊對象的模型。通過該模型，可以非常恰當、形象地展示CSS塊對象的各種屬性，以輔助網(wǎng)頁設計人員理解CSS塊布局的原理。盒子模型是CSS布局的基礎。1.盒模型的結構

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

CSS定義的塊對象包括四部分：邊框區(qū)域、邊框區(qū)域、填充區(qū)域和內容。這些區(qū)域的大小可以使用CSS 定義，而不會影響塊對象的內容。在網(wǎng)頁中，標準的CSS塊對象高度計算公式如下。

標準Css 塊對象的寬度計算公式如下。

了解了網(wǎng)頁塊對象的高和寬的計算方法后，就可以根據(jù)這些方法來定義這些對象在網(wǎng)頁中的排列方式了。2.邊界

在CSS 中，邊框也稱為外部補丁。定義塊對象的邊界，需要使用復合屬性margin及其四個子屬性，如表4-25所示。

也可以不使用composite 屬性，使用margin 屬性為網(wǎng)頁對象設置4 條邊的邊框值。這是通過為margin 屬性設置多個屬性值來完成的。當為margin屬性設置了兩個屬性值時，第一個屬性值定義了網(wǎng)頁對象的上下邊框，第二個屬性值定義了網(wǎng)頁對象左右兩側的邊框，以及它的代碼如下。

為margin屬性設置3個屬性值時，第一個屬性值定義網(wǎng)頁對象頂部的邊框，第二個屬性值定義網(wǎng)頁對象的左右邊框，第三個屬性值定義網(wǎng)頁底部邊框對象，代碼如下。

當為margin屬性設置了四個屬性值時，四個屬性值分別定義了網(wǎng)頁對象的上、右、下、左的邊框寬度，其代碼如下。

3.填充

在CSS 中，padding 也被稱為inner patch。定義塊對象的padding，需要使用復合屬性padding及其四個子屬性，如表4-26所示。

使用沒有復合屬性的padding屬性也可以為網(wǎng)頁對象的4個邊設置不同的padding值。方法是為padding屬性設置多個屬性值。當為padding屬性設置兩個屬性值時，第一個屬性值定義了網(wǎng)頁對象頂部和底部的padding，而第二個屬性值定義了網(wǎng)頁對象的左側和右側。 Side padding，其代碼如下所示。

為margin屬性設置3個屬性值時，第一個屬性值定義web對象頂部的padding，第二個屬性值定義web對象左右兩側的padding，第三個屬性值定義web對象底部的padding，其代碼如下所示。

當為margin屬性設置了四個屬性值時，四個屬性值分別定義了網(wǎng)頁對象的上、右、下、左的padding寬度，代碼如下。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗，每一個項目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！