css樣式表---2

時間 2019-11-08

標籤 css 樣式欄目 CSS 简体版

原文原文鏈接

3.5 CSS做用原理css

3.5.1優先級html

在3.4節中三種基本的HTML樣式選擇器，優先級最高的是ID樣式選擇器，其次是類樣式選擇器，最低的是HTML標籤樣式選擇器。api

本章範例css_prior.htm演示了上述三種樣式選擇器的優先關係。下列代碼中聲明瞭分別以HTML列表標籤名li做樣式選擇器、類名bold做樣式選擇器、ID做樣式選擇器的三個樣式表。瀏覽器

li{ font-weight:normal;color:red; font-size:18px;}服務器

li.bold{ font-weight:bold;color:blue;font-size:14px;}框架

#li1{ font-style:italic; font-weight:normal;color:green;font-size:16px;} ssh

樣式表li對頁面中全部的HTML標籤<li></li>起做用，將其文字顯示成紅色，字號爲18px。ide

樣式表li.bold對使用了class="bold"的<li></li>標籤起做用，將其文字顯示成加粗，藍色，字號爲14px。post

樣式表#li1將頁面中ID號爲li1的標籤文字顯示成斜體，綠色，字號爲16px。測試

在下面代碼的列表標籤中，第一行沒有使用class和id屬性，所以由樣式表li起做用。

樣式表li對頁面中全部<li></li>標籤都起做用，但因爲優先級低於類樣式表選擇器的li.bold，所以，第二行的樣式由li.bold控制。同理，第三行的樣式由樣式表#li1控制。

在第四行中，同時有class="bold" id="li1"兩個屬性，因爲ID樣式選擇器的優先級最高，所以，該行受樣式表#li1的樣式控制。

<li class="bold">class爲bold的列表文字2</li>

<li id="li1">id爲li1的列表文字3</li>

上述代碼的頁面效果如圖3-10所示。

圖3-10　CSS優先級

3.5.2繼承

HTML文檔標籤是一種樹狀嵌套形式的，樣式表做用於標籤時，下層標籤能夠繼承上級標籤的樣式。

在本章範例css_inherit.htm中，網頁中HTML標籤代碼以下。

<body>

<div >

<h1>這是網頁的標題</h1>

<p>這是一個段落。<span>這是段落中的一個範圍標記</span>，範圍標記已經結束了。</p>

<ul>

<li>這是UL中的第一個列表</li>

<li>這是UL中的第二個列表</li>

　</ul>

</div>

</body>

上述代碼中，HTML標籤body、div、h1、p、ul和li是一種樹形嵌套關係，層次關係如圖3-11所示。

圖3-11　css_inherit.htm頁面中標籤層次圖

樣式表的繼承是依據HTML樹形關係，外層的HTML標籤CSS會傳遞到內層標籤中（除非該標籤不具備該樣式屬性，例如color屬性不能被<br/>標籤繼承）。

上例網頁中定義的樣式表以下：

body{color:blue; }

div{font-size:18px; text-align:center; border-color:#F00;border-width:1px; border-style:dashed; }

p{color:red; font-size:18px; font-weight:normal; text-align:left;}

span.strong{color:black; font-size:25px; font-weight:bold; }

樣式定義body的字體顏色爲藍色，根據繼承原則，body標籤內嵌套的div以及div下的h1、p和ul字體都顯示成藍色，只有當下層的標籤另外設計字體顏色，字體的藍色才被子標籤的樣式替換，如p標籤設置字體爲紅色，此時就再也不使用body的藍色。讀者能夠在p段落的內嵌標籤span標籤加上樣式屬性class="strong"，觀察樣式變化。

CSS繼承原則決定HTML子標籤會繼承父標籤的樣式風格，並能夠在父標籤的基礎上加以修改，產生新的樣式，而子標籤的樣式風格不會影響父標籤的樣式。利用這一原則，能夠將公共的樣式寫在父標籤的樣式中，從而節省CSS代碼編寫量。

3.5.3就近原則

當多個樣式都對某個標籤起做用時，若是多個樣式中的屬性互不衝突，則這些樣式共同做用於標籤，有些教材將這種現象稱爲樣式的層疊性。若是定義的樣式屬性有衝突，在優先級相同的前提下，這些樣式中發生衝突的屬性按就近原則對標籤做用，即離標籤最近的樣式中定義的樣式屬性直接起做用。

在本章範例css_recent.htm中，定義了兩個段落標籤樣式p，第一個p樣式設計了字體顏色爲紅色和字體粗細爲普通，第二個p樣式設計了字號爲18px、字體粗細爲加粗和文本對齊方式爲居中，運行該頁面，能夠發現段落是紅色、18px的粗體、文本居中。

p{color:red; font-weight:normal;}

p{font-size:18px; font-weight:bold; text-align:center;}

兩個p樣式中都有樣式font-weight屬性，一個值爲normal，一個值爲bold，最終段落顯示成加粗的字號，這是由於第二個p樣式離p標籤距離更近。讀者能夠修改兩個p樣式的順序，觀察段落字號變化。

3.6 CSS屬性

3.6.1 長度單位

在網頁設計過程當中，相對單位與絕對單位是兩個很是重要的概念，所謂相對單位，是以某個對象爲參考基本，相對於該參考的單位尺度。所謂絕對單位，是以一個固定值來度量的單位尺度。

長度單位中的相對單位有px、em和百分比幾種表示方法，絕對單位有in（英寸）、cm（釐米）、mm（毫米）、pt（點）、pc（皮卡）等。各單位的含義與表示方法如表3-1所示。

表3-1長度單位

類型	單位	含義	示例
相對長度	px	像素，根據顯示設備的分辨率而肯定的一個長度單位，顯然，分辨率都爲800600的17寸顯示器和52寸投影中，像素爲10080的絕對長度是不一樣的，但同一顯示設備中px值是絕對的。	p{font-size:18px;} 將字號設置爲18像素。
em	以目前字符高度爲單位。	p{ text-indent:2em} 段落前空兩個字符。
%	表示長度爲參考標籤的百分比，前面能夠加「+」或「-」兩個符號，若是參考對象沒有肯定值，則爲標準值。	table{width:80%;} 表示表格佔父容器寬度的80%。
絕對長度	in	英寸，1 in = 2.54 cm，非國際單位，平時使用極少。	p{fline-height:1in;} 行高爲1英寸。
cm	釐米，國際標準單位，使用較少。
mm	毫米，國際標準單位，使用較少。
pt	點數，1 pt = 1 / 72 in，基本的顯示單位，較少使用。	p{font-size:15px;} 將字號設置爲11點。
pc	印刷單位，應用在印刷行業中，1pc=16px。

3.6.2 顏色值

網頁中可使用顏色名稱、十六進制、或RGB份量等方式來表示顏色，各類表示方式如表3-2所示。

表3-2網頁顏色

表示方法	含義	示例
顏色名	使用系統預先定義好的顏色名稱表示顏色，如red/green/blue分別表示紅綠藍。	a:link{color:gray;} 活動超連接顏色爲灰色
十六進制	使用十六進制表示顏色，格式爲#RRGGBB，RR表示紅色份量值，GG表示綠色份量值，BB表示藍色份量值。	font-color:#ff0000 字體顏色爲紅色 background-color:#800080 背景色爲紫色
RGB份量	rgb(RR,GG,BB)，RR表示紅色份量值，GG表示綠色份量值，BB表示藍色份量值，能夠用數值或百分比形式表示。	color:rgb(255,0,0); 紅色 color:rgb(80%,0,0); 暗紅

通常狀況下，網頁的配置以不超過四種顏色爲宜，過多的顏色反而會拔苗助長。可根據網站的功能肯定一種主基調色，例如用紅色做爲政治宣傳活動的網站的基調色。

3.6.3 字體屬性

1．font-family屬性

用來設置HTML元素的字體列表，可設置多個值，瀏覽器由前向後依次選擇字體，若是一個網站服務器中沒有安裝前一種字體，則顯示下一個字體。

本章範例font-family.htm定義了三個字體樣式：

h3 {font-family: 「微軟雅黑隸書」}

p {font-family: 黑體}

p.fonder {font-family:「方正姚體宋體」}

若是服務器中安裝有「微軟雅黑」，沒有「方正姚體」，則h3顯示的字體爲「微軟雅黑」，p.fonder顯示的字體爲宋體。效果如圖3-12所示。

圖3-12　 font-family屬性

2．font-size屬性

用來控制字體顯示的大小，取值有相對取值和絕對取值幾種方式，相對取值可以使用百分比或相對值larger、x-large、small、smaller等，絕對取值是指使用絕對長度單位，如px、pt等。

本章範例font-size.htm定義了下列幾種字號：

h1.small{font-size:small;}

.size_a{font-size: 20px;}

.size_b{font-size: 27px;}

.size_c{font-size: 100%;}

頁面效果如圖3-13所示，從圖中能夠看出，相對值是根據系統默認值計算出來的，請讀者觀察h1系統默認值及p默認值差異，以及p和h1使用相對值的顯示效果。

圖3-13　 font-size屬性

3．font-style屬性

用來設置指定元素的顯示字形樣式，font-style屬性有normal（普通）、italic（斜體）、oblique（傾斜）三種取值，默認值爲normal。

例：font-style.htm

body{font-size:24px;}

p.italic {font-style: italic}

p.normal {font-style: normal}

p.oblique {font-style: oblique}

對應顯示效果如圖3-14所示。

圖3-14　 font-style屬性

4．font-weight屬性

設置字體的粗細，屬性取值可爲normal、bold、bolder、light、lighter、100、200、…900，100至900依次從最細漸變到最粗。

例：font-weight.htm

p.normal {font-weight: normal;}

p.thick {font-weight: bold;}

p.thicker {font-weight: 900;}

5．font-variant屬性

設置字型異體，具備nomal與small-caps兩種取值。

例：font-variant.htm

p.normal {font-variant: normal;}

p.small {font-variant: small-caps;}

上例中small-caps將段落中的小寫字母顯示成大寫字母。

請讀者注意，small-caps只是將小字字母顯示成大寫格式，但不是字母轉換，本質上還是小寫字母，讀者能夠複製頁面中的文字粘貼到其餘地方進行檢驗。

6．font屬性

設置字體屬性的一種簡略寫法，設置時能夠省略某些屬性，應按font-weight、font-variant、font-style、font-size、font-family的順序依次出現。

例：font.htm

p { font: italic small-caps 900 22px arial; }

3.6.4 文本屬性

文本屬性用於控制文本的段落格式，包括字符間距(letter-spacing)、文字間距(word-spacing)、行間距(line-height)、文本水平對齊(text-align)、文本垂直(vertical-align)、文本修飾(text-decoration)、文本縮進(text-indent)、文本轉換(text-transform)等屬性。

1． letter-spacing屬性

設置字符間距，屬性值可爲具體長度，並可取負值，用來緊縮字符間距。

例：text_letter-spacing.htm

h1 {letter-spacing: -3px;}

h4 {letter-spacing: 12.5px;}

2．word-spacing屬性

設置文本中單詞(漢字)間的距離。

例：text_word-spacing.htm

p.normal {word-spacing: normal;}

p.length {word-spacing: 1.5 cm;}

3．line-height屬性

控制標記符中文本行高。其取值能夠是數字、長度或百分比，normal爲默認值。如取值爲數字，則表示行高爲當前設置字號的倍數。例如，div{font-size:13px；line-height:2;}，則行高爲13px*2=27px。

例：text_line-height.htm

div{font-size:16px;line-height:2;}

div.thin{font-size:16px;line-height:12px;}

4．text-decoration屬性

文本修飾屬性，包括none、下劃線(underline) 、上劃線(overline) 、刪除線(line-through )以及閃爍(blink)等值，none爲默認值，IE中不支持blink效果，在Firefox瀏覽器中能夠看到h4標籤的閃爍效果。

例：text-decoration.htm

h1 {text-decoration: overline;}

h2 {text-decoration: line-through;}

h3 {text-decoration: underline;}

h4 {text-decoration:blink;}

a {text-decoration: none;}

5．text-align/vertical-align屬性

設置文本的水平對齊/垂直對齊，text-align取值爲left、right、center、justify，默認值爲left，vertical-align的取值爲baseline、sub、super、top、text-top、middle、bottom、text-bottom等值，baseline爲默認值。

6．text-transform屬性

用來設置文本格式轉換，取值有none(默認值)、capitalize(首字母大寫)、uppercase(字母大寫)、lowercase(字母小寫)。與font-variant同樣，text-transform並無真正將字母進行大小寫轉換，只是文本的顯示形式上發生改變。

例：text-transform.htm

p.uppercase {text-transform: uppercase;}

p.lowercase {text-transform: lowercase;}

p.capitalize {text-transform: capitalize;}

7．text-indent屬性

設置首行縮進，取值能夠爲數值或百分比，可取正值或負值，默認值爲0，表示無縮進。

例：text-indent.htm

p {text-indent: 25px;}

p.Chinese{text-indent:2em; font-size:27px;}

3.6.5 顏色和背景

1．顏色屬性

例：color.htm

h1 {color: #00ff00}

h2 {color: #dda0dd}

p {color: rgb(0,0,255)}

2．背景屬性

網頁中能夠設置背景顏色background-color和背景圖案background-image屬性。

例：background-color.htm

div{background-color:blue; margin:10px; padding:10px; width:200px;}

span.highlight

{

background-color:yellow;

}

網頁中的div背景設成藍色，類樣式highlight將span標籤的背景設置成黃色，頁面效果如圖3-15所示。

圖3-15　 background-color屬性

background-image能夠爲HTML標籤指定背景圖片，url用來設置背景圖片路徑，通常來講，網頁背景不須要和頁面等大，經過background-repeat實現圖片在頁面中的平鋪，從而節省帶寬，background-repeat有repeat(水平與垂直平鋪)、repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪)、no-repeat(不平鋪)等取值方式，其中repeat爲默認值。

background-attachment屬性控制指定的背景圖案是否跟隨內容一塊兒滾動，取值爲scroll、fixed，默認值爲scroll。

background-position屬性用於設置指定背景圖案的最初位置。

例：background-image.htm

div

{

background-image:

url(images/bg01.jpg);

background-repeat:repeat-x;

background-attachment:scroll;

height:400px;

}

上例中設置div標籤的背景圖片爲images/bg01.jpg，水平方向平鋪，拉動滾動條時，背景圖片隨內容一齊滾動。頁面效果如圖3-16所示。

圖3-16　 background-image屬性

當同時設置background-color和background-image時，背景圖案優先顯示。

能夠經過background屬性一次性設置背景顏色和圖案及其屬性。

例：background.htm

body

{

background: #00ff00 url(images/eg_background3.jpg) no-repeat fixed center;

}

上述代碼將頁面背景設置成綠色，並設置居中、不平鋪的背景圖片，頁面效果如圖3-17所示。

圖3-17　 background屬性

3.6.6 定位屬性

定位屬性用於控制元素在頁面上的位置，實現頁面內元素之間的重疊。

1．position屬性

設置元素在頁面上的定位方式，取值能夠是static(表示按HTML格式規則正常定位)、relative(相對定位，元素將定位在Web頁上前一個元素的末端位置)、absolute(絕對定位，元素將定位在框架或瀏覽器窗口自己左上角的絕對座標位置)，默認值爲static。

2．top和left屬性

設置某個元素與其餘元素之間的距離，按像素來設定元素位置往下或往右的距離。

下面代碼中樣式類bigheight可把段落的頂部位置控制在上一級元素的邊緣的右下方50像素處。

例：position-top_left.htm

p.bigheight{position:relative;top:100px; left:50px;}

3．z-index屬性

解決元素的重疊問題，至關於某些圖像處理軟件中「層」的概念。取值爲大於等於-1的天然數，z-index值設爲-1能夠實現<img>標籤的背景效果。

例：z-index.htm

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

上例代碼中img的z-index值爲-1，並設置了起始座標爲(0,0)的絕對位置，圖片將在其餘元素標籤的底層，能夠做爲背景。頁面效果如圖3-18所示，讀者能夠修改z-index值，理解z-index的標籤重疊概念。

圖3-18　 z-index定位屬性

巧妙製做元素的定位屬性，能夠實現一些意想不到的效果，下例代碼中使用段落postion與z-index屬性實現一種陰影字效果。

例：position.htm

.s1{position:absolute;top:20px;left:30px;z-index:1;width:400;font-size:53px;color:blue}

.s2{position:absolute;top:23px;left:33px;z-index:2;width:450;font-size:53px;color:yellow}

.s3{position:absolute;top:26px;left:36px;z-index:3;width:400;font-size:53px;color:red}

頁面效果如圖3-19所示。

圖3-19　定位屬性實現的陰影文字

4．width和height屬性

控制元素的寬度和高度。

5．overflow屬性

溢出處理，設置當元素內容溢出其區域大小時如何對內容進行管理，取值可爲visible、hidden、scroll、auto。

例：position-overfloa.htm

div

{

background-color:#00FFFF;

width:150px;

height:150px;

overflow: scroll

}

上例中，div的寬度與高度都設成150像素，overflow設成scroll，當區域內文本超過div的大小，div會出現滾動條。

3.6.7 浮動屬性與文檔流

CSS浮動屬性容許網頁製做者將文本放在一個元素的周圍，浮動屬性爲float和clear兩種。

1．float屬性，將元素的內容浮動到頁面的左邊緣或右邊緣，取值爲left、right、none，默認值爲none。

2．clear屬性，指定一個元素是否容許有元素漂浮在它的旁邊，取值爲none、left、right、both，默認值none。

例：position-float.htm

img{float:left; width:60px; height:60px;}

img.right{float:right;}

p{font-size:18px; }

p.ss{clear:right;}

上述代碼中，樣式img浮動屬性爲left，浮動在頁面的左邊，若是跟在它後面的段落容許其餘元素浮動在其旁邊，能夠實現一種圖文混排的效果，如圖3-20所示。

圖3-20　float屬性

文檔流，Web頁面使用流式頁面，頁面內的元素按順序自動排列在文檔流中。HTML標籤在文檔流內有兩種基本的佔位方式，級塊佔位和行內佔位。

級塊元素，單獨在文檔流中佔一行。div標籤是一種典型的級塊佔位，後面的div標籤與前一個div處於不一樣的行中，除非使用浮動樣式使它脫離正常的文檔流。

行內元素，與其餘元素共同佔用文檔流的一行。span標籤是一種典型的行內元素。

例：document-flow.htm

<span id="span1">行內元素span1<img src="images/left_arrow.gif"></span>

讀者能夠修改示例文檔中各個標籤的float屬性，觀察文檔流的變化。

3.6.8 list屬性

1．list-style-image屬性

將圖像設置爲列表項標記，取值爲none或url。

2．list-style-position屬性

設置列表中列表項標記被放置的位置，取值爲inside、outside。

3．list-style-type屬性

設置或檢索對象的列表項所使用的預設標記。若 list-style-image 屬性值爲 none 或指定 url 地址的圖片不能被顯示時，此屬性將發生做用。

W3C爲list-style-type提供將近20種取值，經常使用取值以下：none(不使用項目符號)、disc(實心圓)、circle(空心圓)、square(實心方塊)、 decimal(阿拉伯數字)、 lower-roman(小寫羅馬數字)、 upper-roman(大寫羅馬數字)、 lower-alpha(小寫英文字母)、upper-alpha(大寫英文字母)等值，默認值爲disc。

上述屬性可以使用list-style一次設置完成。

例：list.htm

{

list-style-image:url(images/dot.gif); list-style-position:inside; list-style-type:disc;

}

3.6.9 cursor 鼠標屬性

用來設置鼠標的不一樣形狀，鼠標屬性取值以下，具體效果試運行範例cursor.htm。

url 需要使用自定義光標的URL，通常圖片格式爲jpg

default 默認光標（一般是一個箭頭）

auto 默認。瀏覽器設置一種光標。

crosshair 光標呈現爲十字線。

pointer 光標呈現爲指示某個連接的指針（一隻手）

move 此光標可指示某對象可被移動

e-resize 此光標可指示某個矩形框的邊緣可被向右（東）移動

ne-resize 此光標可指示某個矩形框的邊緣可被向上及向右移動（北/東）

nw-resize 此光標可指示某個矩形框的邊緣可被向上及向左移動（北/西）

n-resize 此光標可指示某個矩形框的邊緣可被向上（北）移動

se-resize 此光標可指示某個矩形框的邊緣可被向下及向右移動（南/東）

sw-resize 此光標可指示某個矩形框的邊緣可被向下及向左移動（南/西）

s-resize 此光標可指示某個矩形框的邊緣可被向下移動（南）

w-resize 此光標可指示某個矩形框的邊緣可被向左移動（西）

text 此光標可指示文本

wait 此光標可指示程序正忙（一般是一隻表或沙漏）

help 此光標可指示可用的幫助（一般是一個問號或一個氣球）

3.6.10 邊框屬性

1．邊界屬性margin

margin-left、margin-right、margin-top、margin-bottom分別設置頁面元素左、右、上、下邊界的寬度，取值能夠爲長度、百分比或auto。

也可使用margin同時設置四個方向的邊界寬度，四個值按順時針方向依次表示上、右、下、左邊界的值，使用margin方法設置邊框值也可使用省略方式，含義以下：

1個值，表示上、右、下、左四個邊的邊界；

2個值，第1個值表示上下邊框，第2個值表示左右邊框；

3個值，第1個值表示上邊框，第2個值表示左右邊框，第3個值表示下邊界。

例：border-margin.htm

div.margin {margin: 1cm 2cm 75px 4cm}

代碼中樣式類margin定義了div的上、右、下、左四個邊框分別是1、2、3、4釐米，如圖3-21所示。

圖3-21　margin邊界

2．邊框屬性

邊框寬度

border-left-width、border -right-width、border -top-width、border -bottom-width分別用來設置左、右、上、下4個邊框的寬度，取值能夠是thin、medium、thick、length、medium或具體像素值。

使用border-width能夠同時設置四個方向的邊框寬度。

邊框顏色：border-left-color、border -right-color、border -top-color、border -bottom-color分別用來設置左、右、上、下4個邊框的顏色。

使用border-color能夠同時設置四個方向的邊框顏色。

邊框樣式：border-left-style、border -right-style、border -top-style、border -bottom-style分別用來設置左、右、上、下4個邊框的樣式，取值能夠爲none、dotted、dashed、solid、double、groove、ridge、inset、outset，默認值爲none。

例：border-style.htm

div{width:60px; height:40px; float:left; margin:10px; border-width:5px;}

#dashed{border-style:dashed;}

#dotted{border-style:dotted;}

#double{border-style:double;}

#groove{border-style:groove;}

#hidden{border-style:hidden;}

#inset{border-style:inset;}

#none{border-style:none;}

#outset{border-style:outset;}

#ridge{border-style:ridge;}

#solid{border-style:solid;}

border-style能夠同時設置四個方向的邊框樣式。早期IE版本對border-style的支持並不完善，在Firefox瀏覽器中各類邊框樣式如圖3-22所示。

圖3-22　border-style屬性

邊框的全部屬性可使用border屬性完成，而且寬度、顏色和樣式沒有順序要求。

3．填充屬性padding

padding-left、 padding-right、 padding-top 、padding-bottom屬性用於設置左、右、上、下填充區的寬度。

也可以使用padding屬性同時設置四個方向的填充寬度。

例：border-padding.htm

#content {margin:0px; background-color:#FF0000;}

#father{padding: 10px 20px 30px 40px; border:solid 1px;}

本實例中，一個id爲father的div內嵌了一個id爲content的div，樣式#father定義了外層div的padding值，上、右、下、左的padding值分別爲10px、20px、30px和40px， #content樣式定了內部div，因爲邊界被設爲0，內部div與外部div之間的間隙就是外部div的padding值，頁面效果如圖3-23所示。

圖3-23　padding屬性

3.7 CSS盒模型

盒模型是Web頁面一個很是重要的概念，網頁文檔流中的全部元素均可以當作是一個盒子，每一個盒子在頁面中佔據必定的空間。

能夠經過一幅畫來理解盒模型，對於掛在牆上的一幅畫來講，有畫框，畫與畫框之間有距離，畫框與畫框之間也會有必定距離，即外邊距，在網頁盒模型中，外邊距(margin)、邊框(border)、內邊距(padding)以及盒子的長(width)與高(height)共同組成了盒子模型，如圖3-24所示。

圖3-24　盒模型

例：box-model.html

<html>

<head>

body{margin:0px;padding:0px;text-align:left;}

#content {margin:0px; padding:0px; width:100px; height:80px; background-color:#FF0000;}

#father{margin:40px 40px 40px 40px; padding: 10px 20px 30px 40px; border-width:20px; border-style:solid; width:150px;}

#out{margin:0; padding:0px;border:1px solid;}

</style>

</head>

<body>

<div id="content">內容div，margin和border都爲0，外框的padding值爲10px、20px、30px和40px。</div>

</div>

</body>

</html>

上例中，嵌套了兩個div標籤，外層div標籤的四個方向的外邊距margin都爲40px，上、右、下、左的內邊距padding依次爲10px、20px、30px、40px，邊框寬度border-width爲20px，寬度width爲150px，所以，整個外層div所佔的寬度應該是左外邊距+左邊框+左內邊距寬度+寬度+右內邊距+右邊框+右外邊距=40px+20px +40px +150px +20px +20px +40px =330px，頁面效果如圖3-25所示。

圖3-25　Firefox中的盒子模型效果

圖3-26　IE中的盒子模型效果

須要說明的是，IE對標準文檔流與盒模型的支持並不徹底遵循CSS規範，從圖3-26能夠看到，IE理解的盒子寬度是整個盒子內容與邊框和內外邊距的長度之和，所以盒子看起來比Firefox要窄。在Firefox中，若是子對象的長度超過父對象，子對象溢出的內容會顯示在父對象的框架以外，而IE中若是子對象內容溢出，會自動撐大父對象的長度。嚴格意義上來講，IE這種解析是錯誤的，但因爲目前使用IE瀏覽器的用戶羣很大，所以，網頁開發人員必定要注意CSS樣式在不一樣瀏覽器中的區別，最好在IE和Firefox兩種瀏覽器中都進行測試。