CSS網(wǎng)頁布局的核心內(nèi)容:CSS盒模型
互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:37:54 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：本節(jié)的內(nèi)容非常重要，因為盒模型是CSS定位布局的核心內(nèi)容。從前面章節(jié)中，讀者學(xué)習(xí)了布局網(wǎng)頁基本方法，只需利用p元素和列表元素，即可完成頁面大部分的布局工作。但是前面學(xué)習(xí)的知識更注重實踐操作，讀者并不理解布局
本節(jié)的內(nèi)容非常重要，因為盒模型是CSS定位布局的核心內(nèi)容。從前面章節(jié)中，讀者學(xué)習(xí)了布局網(wǎng)頁基本方法，只需利用p元素和列表元素，即可完成頁面大部分的布局工作。但是前面學(xué)習(xí)的知識更注重實踐操作，讀者并不理解布局的原理，常常在布局頁面的過程中遇到無法理解的問題
CSS盒模型
本節(jié)的內(nèi)容非常重要，因為盒模型是CSS定位布局的核心內(nèi)容。從前面章節(jié)中，讀者學(xué)習(xí)了布局網(wǎng)頁基本方法，只需利用p元素和列表元素，即可完成頁面大部分的布局工作。但是前面學(xué)習(xí)的知識更注重實踐操作，讀者并不理解布局的原理，常常在布局頁面的過程中遇到無法理解的問題，需要一步步重復(fù)地“試錯”才能完善布局代碼的編寫。學(xué)習(xí)本章的盒模型的知識以后，讀者將擁有較完善的布局觀，基本可做到在代碼編寫前就“胸有成竹”。
11.3.1 什么是CSS盒模型
XHTML中大部分的元素（特別是塊狀元素）都可以看做一個盒子，而網(wǎng)頁的元素的定位實際就是這些大大小小的盒子在頁面中的定位。這些盒子在頁面中是“流動”的，當(dāng)某個塊狀元素被CSS設(shè)置了浮動屬性，這個盒子就會“流”到上一行。網(wǎng)頁布局即關(guān)注這些盒子在頁面中如何擺放、如何嵌套的問題，而這么多盒子擺在一起，最需要關(guān)注的是盒子尺寸計算、是否流動等要素。
為什么要把XHTML元素作為盒模型來研究呢？因為XHTML元素的特性和一個盒子非常相似，如圖11.18所示。
圖11.18 盒模型示意圖
大多數(shù)XHTML元素的結(jié)構(gòu)都類似于圖11.18所示，除了包含的內(nèi)容（文本或圖片）外，還有內(nèi)邊距、邊框和外邊距一層層的包裹。讀者在布局網(wǎng)頁和定位XHTML元素時要充分地考慮到這些要素，才可以更自如地擺弄這些盒子。
外邊距屬性即CSS的margin屬性，CSS中可拆分為margin-top（頂部外邊距）、margin-bottom（底部外邊距）、margin-left（左邊外邊距）和margin-right（右邊外邊距）。CSS的邊框?qū)傩裕╞order）和內(nèi)邊距屬性（padding）同樣可拆分為4邊。在Web標(biāo)準(zhǔn)中，CSS的width屬性即為盒子所包含內(nèi)容的寬度，而整個盒子的實際寬度即為：
盒子寬度=padding-left border-left margin-left width padding-right border- right margin-right
相應(yīng)地，CSS的height屬性即為盒子所包含內(nèi)容的高度，而整個盒子的實際高度即為：
盒子高度=margin-top border-top padding-top height padding-bottom border -bottom margin-bottom
11.3.2 外邊距的控制
在CSS中，margin屬性可以統(tǒng)一設(shè)置，也可以上下左右分開設(shè)置。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為box_margin.htm，編寫box_margin.htm文件代碼如代碼11.17所示。
代碼11.17 外邊距設(shè)置：box_margin.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>外邊距設(shè)置</title>
<style type="text/css">
*{margin: 0px;}
#all{width:400px;
height:300px;
margin:0px auto;
background-color:#ccc;}
#a,#b,#c,#d,#e{width:150px;
height:50px;
text-align:center;
line-height:50px;
background-color:#fff;}
#a{margin-left:5px;
margin-bottom:20px;}
#b{margin-left:5px;
margin-right:5px;
margin-top:6px;
float:left;}
#c{margin-bottom:5px;}
#e{margin-left:5px;
margin-top:15px;}
</style>
</head>
<body>
<p id="all">
<p id="a">a盒子</p>
<p id="b">b盒子</p>
<p id="c">c盒子</p>
<p id="d">d盒子</p>
<p id="e">e盒子</p>
</p>
</body>
</html>
為了更方便看到p的表現(xiàn)，筆者給外部p設(shè)置了淺灰色背景色，并給內(nèi)部p設(shè)置了白色背景色。在瀏覽器地址欄輸入http://localhost/box_margin.htm，瀏覽效果如圖11.19所示。這個示例非常典型，特別是b盒子、c盒子和d盒子之間的關(guān)系，筆者作關(guān)系圖如圖11.20所示。
圖11.19 外邊距設(shè)置 圖11.20 外邊距關(guān)系圖
由于b盒子設(shè)置了向左浮動，所以緊隨其后的c盒子自然“流”上來，和b盒子并列同一行，如圖11.20所示，b盒子的高度為：
height margin-top=56（像素）
而c盒子的高度為：
height margin-bottom=55（像素）
可見，在這一行中c盒子下面留有1像素的空隙，正是d盒子利用這1像素的空間“流”上來，所以b盒子、c盒子和d盒子存在于同一行。
— 說明：讀者可以嘗試把b盒子的頂部邊距設(shè)置為5像素，這時b盒子和c盒子高度一致。d盒子無法“流”上來，d盒子將自動換行，位于b盒子下面。
11.3.3 邊框的樣式設(shè)置
邊框（border）作為盒模型的組成部分之一，其樣式非常受重視。邊框的CSS樣式設(shè)置不但影響到盒子的尺寸，還影響到盒子的外觀。邊框（border）屬性的值有3種，邊框尺寸（像素）、邊框類型和邊框顏色（十六進制）。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為box_border.htm，編寫box_border.htm文件代碼如代碼11.18所示。
代碼11.18 邊框樣式設(shè)置：box_border.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>邊框樣式設(shè)置</title>
<style type="text/css">
* {margin: 0px;}
#all{width:400px;
height:270px;
margin:0px auto;
background-color:#ccc;}
#a,#b,#c,#d,#e,#f,#g{width:160px;
height:50px;
text-align:center;
line-height:50px;
background-color:#eee;}
#a{width:380px;
margin:5px;
border:1px solid #333;}
#b{border:20px solid #333;
float:left;}
#c{margin-left:5px;
border:20px groove #f00;}
#d{margin-left:5px;
border:2px dashed #000;
float:left;}
#e{margin-left:5px;
border:2px dotted #000;
float:left;}
#f{margin:5px;
border-left:2px solid #fff;
border-top:2px solid #fff;
border-right:2px solid #333;
border-bottom:2px solid #333;
float:left;}
#g{margin-top:5px;
border-top:2px groove #333;}
</style>
</head>
<body>
<p id="all">
<p id="a">a盒子</p>
<p id="b">b盒子（solid類型）</p>
<p id="c">c盒子（groove類型）</p>
<p id="d">d盒子（dashed類型）</p>
<p id="e">e盒子（dotted類型）</p>
<p id="f">f盒子</p>
<p id="g">g盒子</p>
</p>
</body>
</html>
為了更方便看到p的表現(xiàn)，筆者給外部p設(shè)置了#ccc背景色，并給內(nèi)部p設(shè)置了#eee背景色。在瀏覽器地址欄輸入http://localhost/box_border.htm，瀏覽效果如圖11.21所示。
圖11.21 邊框樣式設(shè)置
這個例子使XHTML對象看起來更像個盒子了，只是邊框只是盒子包裝中的一層，最外層的包裝是不可見的外邊距。邊框的寬度計算非常重要，如果讀者定位元素要充分考慮邊框?qū)挾龋鐖D11.21所示，邊框的常用設(shè)置方法為：
border:寬度類型 顏色;
這是4條邊框統(tǒng)一的設(shè)置方法，如果要分開設(shè)置4條邊框，將border改為border-top（頂部邊框）、border-bottom（底部邊框）、border-left（左邊框）和border-right（右邊框）。而修改“類型”可以修改成不同樣子的邊框線條，常用的為solid（實線）、dashed（虛線）、dotted（點狀線）、groove（立體線）、double（雙線）、outset（浮雕線）等，讀者可以一一嘗試。
11.3.4 內(nèi)邊距的設(shè)置
內(nèi)邊距（padding）類似于HTML中表格單元格的填充屬性，即盒子邊框和內(nèi)容之間的距離。內(nèi)邊距（padding）和外邊距（margin）很相似，都是不可見的盒子組成部分，只不過內(nèi)邊距（padding）和外邊距（margin）之間夾著邊框。在D:\web\目錄下創(chuàng)建網(wǎng)頁文件（XHTML1.0），命名為box_padding.htm，編寫box_padding.htm文件代碼如代碼11.19所示。
代碼11.19 內(nèi)邊距的設(shè)置：box_padding.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>內(nèi)邊距的設(shè)置</title>
<style type="text/css">
* {margin: 0px;}
#all{width:360px;
height:300px;
margin:0px auto;
padding:25px;
background-color:#ccc;}
#a,#b,#c,#d,#e,#f,#g{width:160px;
height:50px;
border:1px solid #000;
background-color:#eee;}
p{width:80px;
height:30px;
padding-top:15px;
background-color:#cc9;}
#a{padding-left:50px;}
#b{padding-top:50px;}
#c{padding-right:50px;}
#d{padding-bottom:50px;}
</style>
</head>
<body>
<p id="all">
<p id="a">
<p>a盒子</p>
</p>
<p id="b">
<p>b盒子</p>
</p>
<p id="c">
<p>c盒子</p>
</p>
<p id="d">
<p>d盒子</p>
</p>
</p>
</body>
</html>
為了更方便看到p的表現(xiàn)，筆者給外部p設(shè)置了#ccc背景色，并給內(nèi)部p設(shè)置了#eee背景色，而p元素設(shè)置了#cc9背景色。在瀏覽器地址欄輸入http://localhost/box_padding.htm，瀏覽效果如圖11.22所示。
圖11.22 內(nèi)邊距的設(shè)置
11.3.5 盒模型兼容問題
微軟的IE 6.0以后的版本在瀏覽器內(nèi)嵌了兩種表現(xiàn)模式：標(biāo)準(zhǔn)模式和兼容模式。在標(biāo)準(zhǔn)模式中，瀏覽器根據(jù)W3C所定的規(guī)范來顯示頁面；而在兼容模式中，頁面將以IE 5.0，甚至IE 4.0的顯示頁面的方式來表現(xiàn)，使以前的網(wǎng)頁也能正常顯示。這兩種模式最大的問題就是盒模式的兼容問題，但是，IE在兼容模式下運行的盒模式依然在最新版本的IE 7.0保留著，一旦頁面使用兼容模式瀏覽，IE 7.0將變成跟IE 5.0一樣不兼容Web標(biāo)準(zhǔn)。
不僅IE瀏覽器，其他瀏覽器都有類似的多種解析模式，如Opera瀏覽器、FireFox瀏覽器等。使用瀏覽器不同的模式通過不同的DTD（文檔類型聲明）來實現(xiàn)，在早期的HTML頁面制作中，html聲明部分直接使用的：
<html></html>
這樣的頁面在瀏覽器中瀏覽時會使用兼容模式，如果HTML頁面使用以下DTD聲明。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
或：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
前者代表HTML 4.0的嚴(yán)格類型的文檔類型聲明，后者代表XHTML的文檔類型聲明，這2種DTD將使瀏覽器使用標(biāo)準(zhǔn)模式。
— 說明：雖然IE 6.0和IE 7.0瀏覽器對Web標(biāo)準(zhǔn)沒有實現(xiàn)完全兼容，但相對于以前的版本，IE標(biāo)準(zhǔn)化程度提高了很多。所以讀者制作標(biāo)準(zhǔn)頁面，應(yīng)使用XHTML的DTD。
相關(guān)文章
解析CSS的box model盒模型及其內(nèi)的子元素布局控制
盒模型是CSS控制布局的主要方式之一,尤其是內(nèi)部的元素排列控制,這里我們將來解析CSS的box model盒模型及其內(nèi)的子元素布局控制,需要的朋友可以參考下2016-07-01- 下面小編就為大家?guī)硪黄狢SS3彈性盒模型flex box快速入門心得(必看篇)。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
- 下面小編就為大家?guī)硪黄狢SS彈性盒模型flex在布局中的應(yīng)用詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-24
- 這篇文章主要介紹了幾個CSS3的flex彈性盒模型布局的簡單例子演示,flex布局是迄今為止最強大的web布局方式,需要的朋友可以參考下2016-05-12
- 網(wǎng)頁制作Webjx文章簡介：如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的2009-04-02
- 下面小編就為大家?guī)硪黄猚ss布局模型全面了解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-19