CSS布局模型盒

CSS布局是一種新興的布局方式，其又被稱(chēng)作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è)每個(gè)圖像、每段文本、每個(gè)表格都添加進(jìn)由CSS定義的塊狀對(duì)象中，以實(shí)現(xiàn)靈活的、多樣化的布局方式.CSS定義的AP元素還可以與JavaScript等腳本語(yǔ)言結(jié)合，制作出各種動(dòng)態(tài)效果。

Css盒模型(Box Model)是用來(lái)描述CSS中塊狀對(duì)象的一種模型。通過(guò)該模型，可以將CSS的塊狀對(duì)象的各種屬性十分貼切、形象地表現(xiàn)出來(lái)，以協(xié)助網(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ū)和內(nèi)容4個(gè)部分。使用CSS可以定義這些區(qū)域的大小，而不影響塊狀對(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中，邊界又被稱(chēng)作外補(bǔ)丁。定義塊狀對(duì)象的邊界，需要使用復(fù)合屬性margin以及其4種子屬性，如表4-25所示。



使用不帶復(fù)合屬性的margin屬性也可以為網(wǎng)頁(yè)對(duì)象設(shè)置4邊的邊界值。其方法是為margin屬性設(shè)置多個(gè)屬性值。為margin屬性設(shè)置兩個(gè)屬性值時(shí)，其第I個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象頂部和底部的邊界，而第2個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象左側(cè)和右側(cè)的邊界，其代碼如下所示。



為margin屬性設(shè)置3個(gè)屬性值時(shí)，其第1個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象頂部的邊界，個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象左側(cè)和右側(cè)的邊界，第3個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象底部的邊界，代碼如下所示。



為margin屬性設(shè)置4個(gè)屬性值時(shí)，其4個(gè)屬性值分別定義網(wǎng)頁(yè)對(duì)象的頂部、右側(cè)、底部和左側(cè)的邊界寬度，其代碼如下所示。



3.填充

在Css中，填充又被稱(chēng)作內(nèi)補(bǔ)丁。定義塊狀對(duì)象的填充，需要使用復(fù)合屬性padding以及其4種子屬性，如表4-26所示。



使用不帶復(fù)合屬性的padding屬性也可以為網(wǎng)頁(yè)對(duì)象設(shè)置4邊不同的填充值。其方法是為padding屬性設(shè)置多個(gè)屬性值.為padding屬性設(shè)置兩個(gè)屬性值時(shí)，其第l個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象頂部和底部的填充，而第2個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象左側(cè)和右側(cè)的填充，其代碼如下所示。



為margin屬性設(shè)置3個(gè)屬性值時(shí)，其第1個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象頂部的填充，第2個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象左側(cè)和右側(cè)的填充，第3個(gè)屬性值定義網(wǎng)頁(yè)對(duì)象底部的填充，其代碼如下所示。



為margin屬性設(shè)置4個(gè)屬性值時(shí)，其4個(gè)屬性值分別定義網(wǎng)頁(yè)對(duì)象的頂部、右側(cè)、底部和左側(cè)的填充寬度，其代碼如下所示。