第4章CSS盒子模型

1、 第第4 4章章 CSSCSS盒子模型盒子模型 本章簡介：本章簡介： 本章本章主要介紹盒子模型的基本概念，主要介紹盒子模型的基本概念，并講解并講解CSSCSS定位的基本方法定位的基本方法。所有。所有頁面中的頁面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁面空間。一般來說，這些被占據(jù)的空間往頁面空間。一般來說，這些被占據(jù)的空間往往都要比單純的內(nèi)容大。換句話說，可以通往都要比單純的內(nèi)容大。換句話說，可以通過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒過調(diào)整盒子的邊框和距離等參數(shù)，來調(diào)節(jié)盒子的位置和大小。子的位置和大小。一個(gè)頁面由很多這樣的盒子組成，這一個(gè)頁面由很多這樣

2、的盒子組成，這些盒子之間會(huì)互相影響，因此掌握盒子模型些盒子之間會(huì)互相影響，因此掌握盒子模型需要從兩方面來理解。一是理解一個(gè)孤立的需要從兩方面來理解。一是理解一個(gè)孤立的盒子的內(nèi)部結(jié)構(gòu)；二是理解多個(gè)盒子之間的盒子的內(nèi)部結(jié)構(gòu)；二是理解多個(gè)盒子之間的相互關(guān)系。相互關(guān)系。本章首先講解獨(dú)立的盒子相關(guān)的性質(zhì)，本章首先講解獨(dú)立的盒子相關(guān)的性質(zhì)，然后介紹在普通情況下盒子的排列關(guān)系。下然后介紹在普通情況下盒子的排列關(guān)系。下一章將更深入地講解浮動(dòng)與定位的相關(guān)內(nèi)容。一章將更深入地講解浮動(dòng)與定位的相關(guān)內(nèi)容。 “盒子盒子”與與“模型模型”的概念探究的概念探究4.1長度單位長度單位4.2邊框邊框4.3設(shè)置內(nèi)邊距設(shè)置內(nèi)邊距4

3、.4 設(shè)置外邊距設(shè)置外邊距4.5盒子之間的關(guān)系盒子之間的關(guān)系4.6盒子在標(biāo)準(zhǔn)流中的定位原則盒子在標(biāo)準(zhǔn)流中的定位原則4.7盒子模型概念的實(shí)例盒子模型概念的實(shí)例4.84.1 “盒子”與“模型”的概念探究在學(xué)習(xí)盒子模型之前，先舉例說明相關(guān)概念。假設(shè)在墻上整齊地在學(xué)習(xí)盒子模型之前，先舉例說明相關(guān)概念。假設(shè)在墻上整齊地排列著排列著4 4幅畫，如圖幅畫，如圖4.14.1所示。對(duì)于每幅畫來說，都有一個(gè)所示。對(duì)于每幅畫來說，都有一個(gè)“邊框邊框”，在英文中稱為在英文中稱為“border”border”；每個(gè)畫框中，畫和邊框通常都會(huì)有一定的；每個(gè)畫框中，畫和邊框通常都會(huì)有一定的距離，這個(gè)距離稱為距離，這個(gè)距離稱為

4、“內(nèi)邊距內(nèi)邊距”，在英文中稱為，在英文中稱為“padding”padding”；各幅畫；各幅畫之間通常也不會(huì)緊貼著，它們之間的距離稱為之間通常也不會(huì)緊貼著，它們之間的距離稱為“外邊距外邊距”，在英文中，在英文中稱為稱為“margin” margin” 。畫框示意圖4.1 “盒子”與“模型”的概念探究在學(xué)習(xí)盒子模型之前，先舉例說明相關(guān)概念。假設(shè)在墻上整齊地在學(xué)習(xí)盒子模型之前，先舉例說明相關(guān)概念。假設(shè)在墻上整齊地排列著排列著4 4幅畫，如圖幅畫，如圖4.14.1所示。對(duì)于每幅畫來說，都有一個(gè)所示。對(duì)于每幅畫來說，都有一個(gè)“邊框邊框”，在英文中稱為在英文中稱為“border”border”；每個(gè)畫框

5、中，畫和邊框通常都會(huì)有一定的；每個(gè)畫框中，畫和邊框通常都會(huì)有一定的距離，這個(gè)距離稱為距離，這個(gè)距離稱為“內(nèi)邊距內(nèi)邊距”，在英文中稱為，在英文中稱為“padding”padding”；各幅畫；各幅畫之間通常也不會(huì)緊貼著，它們之間的距離稱為之間通常也不會(huì)緊貼著，它們之間的距離稱為“外邊距外邊距”，在英文中，在英文中稱為稱為“margin” margin” 。盒子模型4.2長 度 單 位本節(jié)介紹本節(jié)介紹CSSCSS規(guī)范中關(guān)于長度的規(guī)定。在規(guī)范中關(guān)于長度的規(guī)定。在HTMLHTML中，無論中，無論是文字的大小，還是圖片的長寬設(shè)置，通常都使用像素或百是文字的大小，還是圖片的長寬設(shè)置，通常都使用像素或百分比

6、來進(jìn)行設(shè)置。在分比來進(jìn)行設(shè)置。在CSSCSS中可以用多種長度單位，主要分為中可以用多種長度單位，主要分為兩種類型，一種是相對(duì)類型，另一種是絕對(duì)類型。兩種類型，一種是相對(duì)類型，另一種是絕對(duì)類型。1相對(duì)類型相對(duì)類型2絕對(duì)類型絕對(duì)類型4.3邊 框邊框（邊框（borderborder）一般用于分隔不同元素，其外圍即為元）一般用于分隔不同元素，其外圍即為元素的最外圍，因此計(jì)算元素實(shí)際的寬和高時(shí)，就要將素的最外圍，因此計(jì)算元素實(shí)際的寬和高時(shí)，就要將borderborder納入。換句話說，納入。換句話說，borderborder會(huì)占據(jù)空間，所以在計(jì)算精細(xì)的版會(huì)占據(jù)空間，所以在計(jì)算精細(xì)的版面時(shí)，一定要把面時(shí)，

7、一定要把borderborder的影響考慮進(jìn)去。的影響考慮進(jìn)去。border的屬性主要有的屬性主要有3個(gè)，分別是個(gè)，分別是color（顏色）、（顏色）、width（粗細(xì)）和（粗細(xì)）和style（樣式）。在設(shè)置（樣式）。在設(shè)置border時(shí)常常需要時(shí)常常需要將這將這3個(gè)屬性很好地配合起來，才能達(dá)到良好的效果。在使個(gè)屬性很好地配合起來，才能達(dá)到良好的效果。在使用用CSS設(shè)置邊框的時(shí)候，可以分別使用設(shè)置邊框的時(shí)候，可以分別使用border-color、border-width和和border-style設(shè)置它們。設(shè)置它們。border4.3.1設(shè)置邊框樣式邊框各種樣式的顯示效果邊框各種樣式的顯示效果

8、。border-style4.3.2屬性值的簡寫形式CSSCSS中可以用簡單的方式確定邊框的屬性值中可以用簡單的方式確定邊框的屬性值。1對(duì)不同的邊框設(shè)置不同的屬性值對(duì)不同的邊框設(shè)置不同的屬性值2在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式在一行中同時(shí)設(shè)置邊框的寬度、顏色和樣式3對(duì)一條邊框設(shè)置與其他邊框不同的屬性對(duì)一條邊框設(shè)置與其他邊框不同的屬性4同時(shí)制定一條邊框的一種屬性同時(shí)制定一條邊框的一種屬性5實(shí)例實(shí)例4.3.3邊框與背景在設(shè)置邊框時(shí)，還有一點(diǎn)值得注意，在給元素設(shè)置在設(shè)置邊框時(shí)，還有一點(diǎn)值得注意，在給元素設(shè)置background-colorbackground-color背景色時(shí)，背景色時(shí)，IE

9、IE作用的區(qū)域?yàn)樽饔玫膮^(qū)域?yàn)閏ontent + content + paddingpadding，而，而FirefoxFirefox的作用區(qū)域則是的作用區(qū)域則是content + padding + content + padding + borderborder。這在。這在borderborder設(shè)置為粗虛線時(shí)表現(xiàn)得特別明顯。設(shè)置為粗虛線時(shí)表現(xiàn)得特別明顯。IE與Firefox對(duì)待背景色的不同處理4.4設(shè)置內(nèi)邊距內(nèi)邊距（內(nèi)邊距（paddingpadding），用于控制內(nèi)容與邊框之間的距離。），用于控制內(nèi)容與邊框之間的距離。在邊框和內(nèi)容之間的空白區(qū)域就是內(nèi)邊距。在邊框和內(nèi)容之間的空白區(qū)域就是內(nèi)邊

10、距。設(shè)置padding后的效果4.5設(shè)置外邊距外邊距（外邊距（marginmargin）指的是元素與元素之間的距離?？梢钥吹竭吙颍┲傅氖窃嘏c元素之間的距離?？梢钥吹竭吙蛟谀J(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器窗口的邊框。這是因?yàn)槠鞔翱诘倪吙?。這是因?yàn)閎odybody本身也是一個(gè)盒子，在默認(rèn)情況下，本身也是一個(gè)盒子，在默認(rèn)情況下，bodybody會(huì)有一個(gè)若干像素的會(huì)有一個(gè)若干像素的marginmargin，具體數(shù)值因各個(gè)瀏覽器而不盡相同。，具體數(shù)值因各個(gè)瀏覽器而不盡相同。因此在因此在bodybody中的其他盒子就

11、不會(huì)緊貼著瀏覽器窗口的邊框了。為了驗(yàn)中的其他盒子就不會(huì)緊貼著瀏覽器窗口的邊框了。為了驗(yàn)證這一點(diǎn)，可以給證這一點(diǎn)，可以給bodybody這個(gè)盒子也加一個(gè)邊框。這個(gè)盒子也加一個(gè)邊框。margin的效果4.6盒子之間的關(guān)系一個(gè)盒子內(nèi)部的關(guān)系不難理解，實(shí)際上網(wǎng)頁往往是很復(fù)雜的，一一個(gè)盒子內(nèi)部的關(guān)系不難理解，實(shí)際上網(wǎng)頁往往是很復(fù)雜的，一個(gè)網(wǎng)頁可能存在著大量的盒子，并且它們以各種關(guān)系相互影響著。個(gè)網(wǎng)頁可能存在著大量的盒子，并且它們以各種關(guān)系相互影響著。要把一個(gè)盒子與外部的其他盒子之間的關(guān)系理解清楚，并不是簡要把一個(gè)盒子與外部的其他盒子之間的關(guān)系理解清楚，并不是簡單的事情。在很多單的事情。在很多CSSCSS

12、資料中大都通過簡單的分類，就資料中大都通過簡單的分類，就CSSCSS本身的介紹本身的介紹來說明這個(gè)問題，往往只是就事論事。如果不能從站得更高的角度來來說明這個(gè)問題，往往只是就事論事。如果不能從站得更高的角度來理解這個(gè)問題，那么想真正搞懂它很困難，因此這里從更深入的角度理解這個(gè)問題，那么想真正搞懂它很困難，因此這里從更深入的角度來介紹來介紹CSSCSS與與HTMLHTML的關(guān)系。的關(guān)系。4.6.1HTML與DOM這里首先介紹這里首先介紹DOMDOM的概念。的概念。DOMDOM是是Document Object ModelDocument Object Model的縮寫，的縮寫，即即“文檔對(duì)象模型

13、文檔對(duì)象模型”。一個(gè)網(wǎng)頁的所有元素組織在一起，就構(gòu)成了一。一個(gè)網(wǎng)頁的所有元素組織在一起，就構(gòu)成了一棵棵“DOMDOM樹樹”。1“樹樹”的概念的概念2DOM樹樹3DOM樹與盒子模型的聯(lián)系樹與盒子模型的聯(lián)系4.6.2標(biāo)準(zhǔn)文檔流“標(biāo)準(zhǔn)文檔流標(biāo)準(zhǔn)文檔流”（Normal Document StreamNormal Document Stream），簡稱），簡稱“標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流”，是指在不使用其他與排列和定位相關(guān)的特殊是指在不使用其他與排列和定位相關(guān)的特殊CSSCSS規(guī)則時(shí)，各種元素的規(guī)則時(shí)，各種元素的排列規(guī)則。排列規(guī)則。1塊級(jí)元素（塊級(jí)元素（block level）2行內(nèi)元素（行內(nèi)元素（inline）4.

14、6.3標(biāo)記與標(biāo)記（divisiondivision）簡單而言是一個(gè)區(qū)塊容器標(biāo)記，即）簡單而言是一個(gè)區(qū)塊容器標(biāo)記，即與與之間之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等各種各種HTMLHTML元素。可以把元素?？梢园雅c與中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于中的內(nèi)容視為一個(gè)獨(dú)立的對(duì)象，用于CSSCSS的控制。聲明時(shí)只需要對(duì)的控制。聲明時(shí)只需要對(duì)進(jìn)行相應(yīng)的控制，其中的各標(biāo)記元素都會(huì)隨之改進(jìn)行相應(yīng)的控制，其中的各標(biāo)記元素都會(huì)隨之改變。變。標(biāo)記與標(biāo)記與標(biāo)記一樣，作為容器標(biāo)記而被廣泛應(yīng)用在標(biāo)記一樣，作為容器標(biāo)記

15、而被廣泛應(yīng)用在HTMLHTML語言中。語言中。在在與與中間同樣可以容納各種中間同樣可以容納各種HTMLHTML元素，從而形成獨(dú)立的對(duì)象。如元素，從而形成獨(dú)立的對(duì)象。如果把果把“”替換成替換成“”，樣式表中把，樣式表中把“divdiv”替換成替換成“spanspan”，執(zhí)行，執(zhí)行后就會(huì)發(fā)現(xiàn)效果完全一樣?？梢哉f后就會(huì)發(fā)現(xiàn)效果完全一樣?？梢哉f與與這兩個(gè)標(biāo)記起到的作用都是獨(dú)這兩個(gè)標(biāo)記起到的作用都是獨(dú)立出各個(gè)區(qū)塊，在這個(gè)意義上說二者沒有不同。立出各個(gè)區(qū)塊，在這個(gè)意義上說二者沒有不同。與與的區(qū)別在于，的區(qū)別在于，是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)是一個(gè)塊級(jí)元素，它包圍的元素會(huì)自動(dòng)換行。而換行。而僅僅是一個(gè)

16、行內(nèi)元素（僅僅是一個(gè)行內(nèi)元素（inline elementsinline elements），在它的前后不會(huì)換），在它的前后不會(huì)換行。行。沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，沒有結(jié)構(gòu)上的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，就可以使用就可以使用元素。元素。4.7盒子在標(biāo)準(zhǔn)流中的定位原則在了解了標(biāo)準(zhǔn)流的基本原理后，介紹如何具體制作一些案例，掌握在了解了標(biāo)準(zhǔn)流的基本原理后，介紹如何具體制作一些案例，掌握盒子在標(biāo)準(zhǔn)流中的定位原則。盒子在標(biāo)準(zhǔn)流中的定位原則。如果要精確地控制盒子的位置，就必須對(duì)如果要精確地控制盒子的位置，就必須對(duì)marginmargin有更深入的了解。

17、有更深入的了解。paddingpadding只存在于一個(gè)盒子內(nèi)部，所以通常它不會(huì)涉及與其他盒子之間的只存在于一個(gè)盒子內(nèi)部，所以通常它不會(huì)涉及與其他盒子之間的關(guān)系和相互影響的問題。關(guān)系和相互影響的問題。marginmargin則用于調(diào)整不同的盒子之間的位置關(guān)系，則用于調(diào)整不同的盒子之間的位置關(guān)系，因此必須要對(duì)因此必須要對(duì)marginmargin在不同情況下的性質(zhì)有非常深入的了解。在不同情況下的性質(zhì)有非常深入的了解。4.7.1行內(nèi)元素之間的水平margin兩個(gè)塊并排的情況。兩個(gè)塊并排的情況。行內(nèi)元素之間的margin4.7.2塊級(jí)元素之間的豎直margin如果不是行內(nèi)元素，而是豎直排列的塊級(jí)元素，

18、如果不是行內(nèi)元素，而是豎直排列的塊級(jí)元素，marginmargin的取值情況的取值情況就會(huì)有所不同。兩個(gè)塊級(jí)元素之間的距離不是就會(huì)有所不同。兩個(gè)塊級(jí)元素之間的距離不是margin-bottommargin-bottom與與margin-margin-toptop的總和，而是兩者中的較大者，如圖的總和，而是兩者中的較大者，如圖4.204.20所示。這個(gè)現(xiàn)象稱為所示。這個(gè)現(xiàn)象稱為marginmargin的的“塌陷塌陷”（或稱為（或稱為“合并合并”）現(xiàn)象，意思是說較小的）現(xiàn)象，意思是說較小的marginmargin塌塌陷（合并）到了較大的陷（合并）到了較大的marginmargin中。中。塊元素之間的margin4.7.3嵌套盒子之間的margin除了上面提到的行內(nèi)元素間隔和塊級(jí)元素間隔這兩種關(guān)系外，還有除了上面提到的行內(nèi)元素間隔和塊級(jí)元素間隔這兩種關(guān)系外，還