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

CSS盒模型（Box Model）是CSS中用來(lái)描述塊對(duì)象的模型。通過(guò)該模型，可以非常恰當(dāng)、形象地展示CSS塊對(duì)象的各種屬性，以輔助網(wǎng)頁(yè)設(shè)計(jì)人員理解CSS塊布局的原理。盒子模型是CSS布局的基礎(chǔ)。1.盒模型的結(jié)構(gòu)

在CSS 中，所有塊對(duì)象都被視為一個(gè)矩形框。矩形的所有與位置相關(guān)的屬性都被視為盒模型的一部分。盒模型的結(jié)構(gòu)如圖4-5所示。

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

標(biāo)準(zhǔn)Css 塊對(duì)象的寬度計(jì)算公式如下。

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

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

也可以不使用composite 屬性，使用margin 屬性為網(wǎng)頁(yè)對(duì)象設(shè)置4 條邊的邊框值。這是通過(guò)為margin 屬性設(shè)置多個(gè)屬性值來(lái)完成的。當(dāng)為margin屬性設(shè)置了兩個(gè)屬性值時(shí)，第一個(gè)屬性值定義了網(wǎng)頁(yè)對(duì)象的上下邊框，第二個(gè)屬性值定義了網(wǎng)頁(yè)對(duì)象左右兩側(cè)的邊框，以及它的代碼如下。

為margin屬性設(shè)置3個(gè)屬性值時(shí)，第一個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象頂部的邊框，第二個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象的左右邊框，第三個(gè)屬性值定義網(wǎng)頁(yè)底部邊框?qū)ο?，代碼如下。

當(dāng)為margin屬性設(shè)置了四個(gè)屬性值時(shí)，四個(gè)屬性值分別定義了網(wǎng)頁(yè)對(duì)象的上、右、下、左的邊框?qū)挾龋浯a如下。

3.填充

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

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

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

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

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