元素盒子大小的計算

1、contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的計算元素盒子大小的計算一個元素實際寬度一個元素實際寬度=左邊界左邊框左填左邊界左邊框左填充內(nèi)容寬度右填充右邊框右邊界充內(nèi)容寬度右填充右邊框右邊界IE quirk模式下盒子的寬度模式下盒子的寬度p當將文檔聲明當將文檔聲明DOCTYPE刪除后，刪除后，IE對網(wǎng)對網(wǎng)頁的解

2、釋會進入頁的解釋會進入quirk（怪異）模式，此（怪異）模式，此時盒子的寬度等于時盒子的寬度等于左邊界寬度右邊界左邊界寬度右邊界p因此當使用了盒子屬性后切忌刪除因此當使用了盒子屬性后切忌刪除DOCTYPE本節(jié)內(nèi)容本節(jié)內(nèi)容p盒子在標準流下的排列盒子在標準流下的排列行內(nèi)元素盒子顯示問題行內(nèi)元素盒子顯示問題display屬性屬性盒子的盒子的margin疊加問題疊加問題p背景的運用背景的運用盒子的定位盒子的定位盒子的三種定位形式盒子的三種定位形式p在標準流下的定位在標準流下的定位p在浮動屬性下的定位在浮動屬性下的定位p在定位屬性下的定位在定位屬性下的定位p除非設(shè)置浮動屬性或定位屬性，否則所有除非設(shè)置浮

3、動屬性或定位屬性，否則所有盒子都是在盒子都是在標準流標準流中定位。顧名思義，標中定位。顧名思義，標準流中元素盒子的位置由元素在準流中元素盒子的位置由元素在HTML中中的位置決定。的位置決定。標準流標準流pHTML元素在標準狀況下的定位方式元素在標準狀況下的定位方式p行內(nèi)元素在同一行內(nèi)橫向排列行內(nèi)元素在同一行內(nèi)橫向排列p塊級元素占滿整個一行，在頁面中豎向排塊級元素占滿整個一行，在頁面中豎向排列列p元素不會移動到其它地方去，對于嵌套的元素不會移動到其它地方去，對于嵌套的元素盒子也是嵌套的關(guān)系元素盒子也是嵌套的關(guān)系標準流下的盒子排列分析標準流下的盒子排列分析* border: 2px dashed

4、#FF0066;padding: 10px;margin: 2px;網(wǎng)頁的網(wǎng)頁的banner（塊級元素）（塊級元素）行內(nèi)元素行內(nèi)元素1行內(nèi)行內(nèi)2行內(nèi)行內(nèi)3這是無名塊這是無名塊這是盒子中的盒子這是盒子中的盒子行內(nèi)元素的盒子行內(nèi)元素的盒子p行內(nèi)元素的盒子永遠只能在瀏覽器中得到行內(nèi)元素的盒子永遠只能在瀏覽器中得到一行高度一行高度的空間（行高由的空間（行高由line-height屬性屬性決定，如果沒設(shè)置該屬性，則是內(nèi)容的默決定，如果沒設(shè)置該屬性，則是內(nèi)容的默認高度），如果給它設(shè)置上下認高度），如果給它設(shè)置上下border，margin，padding等值，導(dǎo)致其盒子的高等值，導(dǎo)致其盒子的高度超過行高，

5、那么它的盒子上下部分將和度超過行高，那么它的盒子上下部分將和其他元素的盒子重疊。其他元素的盒子重疊。p因此，不推薦對行內(nèi)元素直接設(shè)置盒子屬因此，不推薦對行內(nèi)元素直接設(shè)置盒子屬性，一般先設(shè)置行內(nèi)元素以性，一般先設(shè)置行內(nèi)元素以塊級元素顯示塊級元素顯示，再設(shè)置它的盒子屬性。再設(shè)置它的盒子屬性。 改變行內(nèi)元素的高度改變行內(nèi)元素的高度p如圖所示，當增加行內(nèi)元素的邊界和填充時，行如圖所示，當增加行內(nèi)元素的邊界和填充時，行內(nèi)元素內(nèi)元素a占據(jù)瀏覽器的高度并沒有增加，下面這占據(jù)瀏覽器的高度并沒有增加，下面這個個div塊仍然在原來的位置，導(dǎo)致行內(nèi)元素盒子塊仍然在原來的位置，導(dǎo)致行內(nèi)元素盒子的上下部分重疊，而左右部

6、分不會受影響的上下部分重疊，而左右部分不會受影響 display屬性屬性p通過通過display屬性可控制元素是以行內(nèi)元素屬性可控制元素是以行內(nèi)元素顯示還是以塊級元素顯示，或不顯示顯示還是以塊級元素顯示，或不顯示pdisplay:block | inline | none | list-itemblockblock元素元素pblockblock元素的特點是：元素的特點是：總是在新行上開始；總是在新行上開始；高度，行高以及頂和底邊距都可控制；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的寬度缺省是它的容器的100%100%，除非用，除非用widthwidth設(shè)定設(shè)定一個寬度一個寬度, ,

7、 , , , , , , 和和 是是塊元素的例子。塊元素的例子。 inline元素元素inline元素的特點是：元素的特點是：p和其他元素都在一行上和其他元素都在一行上p高，行高及頂和底邊距不可改變；高，行高及頂和底邊距不可改變；p寬度就是它的文字或圖片的寬度，不可改寬度就是它的文字或圖片的寬度，不可改變。變。, , , , , 和和是是inline元素的例子元素的例子 列表項元素列表項元素display: list-itemp在在html中只有中只有l(wèi)i元素默認是此類型，將元元素默認是此類型，將元素設(shè)置為列表項元素后將按列表元素顯示，素設(shè)置為列表項元素后將按列表元素顯示，再通過設(shè)置列表選項可

8、使元素的左邊出現(xiàn)再通過設(shè)置列表選項可使元素的左邊出現(xiàn)小黑點。小黑點。 隱藏元素隱藏元素display: none;p當某個元素被設(shè)置成了隱藏元素之后，瀏當某個元素被設(shè)置成了隱藏元素之后，瀏覽器會完全忽略掉這個元素，該元素將不覽器會完全忽略掉這個元素，該元素將不會被顯示，也不會占據(jù)文檔中的位置。像會被顯示，也不會占據(jù)文檔中的位置。像title元素默認就是此類型。元素默認就是此類型。p比較比較visibility: hidden; p制作下拉菜單、制作下拉菜單、tab面板等有時就需要用面板等有時就需要用display: none把菜單或面板隱藏起來把菜單或面板隱藏起來需要使用需要使用display

9、屬性切換的情況屬性切換的情況p 讓一個讓一個inline元素從新行開始；元素從新行開始；p 讓塊元素和其他元素保持在一行上；讓塊元素和其他元素保持在一行上；p 控制控制inline元素的寬度元素的寬度;p 控制控制inline元素的高度（對導(dǎo)航條特別有元素的高度（對導(dǎo)航條特別有用）；用）；p 無須設(shè)定寬度即可為一個塊元素設(shè)定與無須設(shè)定寬度即可為一個塊元素設(shè)定與文字同寬的背景色文字同寬的背景色 用盒子屬性制作導(dǎo)航條用盒子屬性制作導(dǎo)航條#navigation li adisplay:block;text-decoration:none;border-left:12px solid #711515;

10、 /* 左邊的粗紅邊左邊的粗紅邊 */border-right:1px solid #711515; /* 右側(cè)陰影右側(cè)陰影 */height: 1em; /* 解決解決IE6的的bug */padding: 5px;#navigation li a:hoverbackground-color:#990020;/* 改變背景色改變背景色 */color:#ffff00;* 改變文字顏色改變文字顏色 */盒子的盒子的margin疊加問題疊加問題盒子的盒子的margin在標準流中的計算在標準流中的計算p實驗實驗1行內(nèi)元素之間的水平行內(nèi)元素之間的水平margin span.leftmargin-ri

11、ght:30px;background-color:#a9d6ff;span.rightmargin-left:40px;background-color:#eeb0b0;行內(nèi)元素之間的水平行內(nèi)元素之間的水平marginp行內(nèi)元素之間的水平行內(nèi)元素之間的水平margin不會疊加不會疊加span 2span 1margin-rightmargin-left實驗實驗2塊級元素之間的豎直塊級元素之間的豎直margin 塊元素塊元素1塊元素塊元素2塊元素塊元素1塊元素塊元素2塊元素塊元素1塊元素塊元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50p

12、x空白邊疊加空白邊疊加p當一個元素包含在另一個元素中時，若父元素當一個元素包含在另一個元素中時，若父元素的邊框和填充為的邊框和填充為0，此時父元素和子元素的，此時父元素和子元素的margin挨在一起，那么父元素的上下挨在一起，那么父元素的上下margin也也會和子元素的上下會和子元素的上下margin發(fā)生疊加。若父元素發(fā)生疊加。若父元素的邊框或填充不為的邊框或填充不為0，那么父元素和子元素的，那么父元素和子元素的margin會被分隔開，因此不存在疊加的問題。會被分隔開，因此不存在疊加的問題。p經(jīng)驗：如果有盒子嵌套，要調(diào)整外面盒子和里經(jīng)驗：如果有盒子嵌套，要調(diào)整外面盒子和里面盒子之間的距離，一般

13、用外面盒子的面盒子之間的距離，一般用外面盒子的padding來調(diào)整，不要用里面盒子的來調(diào)整，不要用里面盒子的margin，這樣可以，這樣可以避免空白邊疊加的現(xiàn)象出現(xiàn)避免空白邊疊加的現(xiàn)象出現(xiàn) 嵌套盒子之間的嵌套盒子之間的marginp盒子在標準流中的定位原則盒子在標準流中的定位原則實驗3嵌套盒子之間的margin 嵌套盒子在嵌套盒子在IE和和Firefox中的不同顯示中的不同顯示p 當一個塊元素包含在另一個塊元素中時，若對父塊設(shè)置高當一個塊元素包含在另一個塊元素中時，若對父塊設(shè)置高度，但父塊的高度不足以容納子塊時，度，但父塊的高度不足以容納子塊時，IE將使父塊的高度將使父塊的高度自動伸展，達到能

14、容納子塊的最小高度為止；若同時設(shè)置自動伸展，達到能容納子塊的最小高度為止；若同時設(shè)置了子塊高度，了子塊高度，IE將使子塊高度自動壓縮，直到能容納內(nèi)容將使子塊高度自動壓縮，直到能容納內(nèi)容的最小高度為止。而的最小高度為止。而Firefox對父塊和子塊均以定義的高度對父塊和子塊均以定義的高度為準，父塊高度不會伸展，任其子塊露在外面，子塊高度為準，父塊高度不會伸展，任其子塊露在外面，子塊高度也不會壓縮。也不會壓縮。 背景的應(yīng)用背景的應(yīng)用CSS的背景屬性的背景屬性p 背景（背景（background）是網(wǎng)頁中常用的一種表現(xiàn)方法，無）是網(wǎng)頁中常用的一種表現(xiàn)方法，無論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁

15、帶來豐論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁帶來豐富的視覺效果，富的視覺效果，HTML的很多元素都具有的很多元素都具有bgcolor和和backgroud屬性，可以設(shè)置背景顏色和背景圖片，如屬性，可以設(shè)置背景顏色和背景圖片，如（table、td等），但形式比較單一，對背景圖片的設(shè)定，等），但形式比較單一，對背景圖片的設(shè)定，只支持在只支持在X軸和軸和Y軸都平鋪的方式，因此，如果同時設(shè)軸都平鋪的方式，因此，如果同時設(shè)置了背景顏色和背景圖片，那么背景顏色將被背景圖片置了背景顏色和背景圖片，那么背景顏色將被背景圖片擋住，以背景圖片來顯示。擋住，以背景圖片來顯示。p 而而CSS對元素的背景設(shè)置，則提

16、供了更多的途徑，如背對元素的背景設(shè)置，則提供了更多的途徑，如背景圖片既可以平鋪也可以不平鋪，還可以在景圖片既可以平鋪也可以不平鋪，還可以在X軸平鋪或軸平鋪或在在Y軸平鋪，當背景圖片不平鋪時，并不會完全擋住背軸平鋪，當背景圖片不平鋪時，并不會完全擋住背景顏色，因此可以綜合設(shè)置背景顏色和背景圖片達到希景顏色，因此可以綜合設(shè)置背景顏色和背景圖片達到希望的效果。望的效果。p CSS的背景屬性是的背景屬性是backgroud或以或以backgroud開頭開頭 CSS的背景屬性的背景屬性屬性屬性描述描述可用值可用值background設(shè)置背景的所有控制選項，是設(shè)置背景的所有控制選項，是其他所有背景屬性的縮

17、寫其他所有背景屬性的縮寫其他背景屬性的值的集其他背景屬性的值的集合合background-color設(shè)置背景顏色設(shè)置背景顏色rgb顏色顏色命名顏色命名顏色16進制顏色進制顏色background-image設(shè)置背景圖片設(shè)置背景圖片urlbackground-repeat 設(shè)置背景圖片的平鋪設(shè)置背景圖片的平鋪方式方式repeat（完全平鋪）（完全平鋪）repeat-x（橫向平鋪）（橫向平鋪）repeat-y（縱向平鋪）（縱向平鋪）no-repeat（不平鋪）（不平鋪）background-attachment設(shè)置背景圖片固定還設(shè)置背景圖片固定還是隨內(nèi)容滾動是隨內(nèi)容滾動scroll（默認值）（默認

18、值）fixedbackground-position設(shè)置背景圖片顯示的設(shè)置背景圖片顯示的起始位置起始位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各個背景屬性的默認值各個背景屬性的默認值pbackground-color: transparent 透明模式透明模式pbackground-image: none pbackground-repeat: repeat pbackground-attachment: scroll pbackground-position: 0% 0%background屬性的縮寫屬性的縮寫pbackgr

19、ound屬性是所有背景屬性的縮寫屬性是所有背景屬性的縮寫形式，就像形式，就像font屬性一樣，其縮寫順序為：屬性一樣，其縮寫順序為：pbackground: background-color | background-image | background-repeat | background-attachment | background-positionp如如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;DW中的背景設(shè)置面板中的背景設(shè)置面板background-color:#0099ccbackground-i

20、mage: url(img/bottom.gif)background-repeat: no-repeatbackground-position: right bottombackground-attachment: no-repeat背景的運用技巧背景的運用技巧背景的運用技巧背景的運用技巧p 同時運用背景顏色和背景圖片同時運用背景顏色和背景圖片p 控制背景在盒子中的位置及是否平鋪控制背景在盒子中的位置及是否平鋪p 多個元素背景的疊加多個元素背景的疊加 p 滑動門技術(shù)滑動門技術(shù) p 背景位置的控制實現(xiàn)圖片的翻轉(zhuǎn)背景位置的控制實現(xiàn)圖片的翻轉(zhuǎn)p 圓角的設(shè)計方法總結(jié)圓角的設(shè)計方法總結(jié) 同時運用背景顏

21、色和背景圖片同時運用背景顏色和背景圖片p目前網(wǎng)頁中流行采用一種漸變背景，即網(wǎng)頁的背景從上至下目前網(wǎng)頁中流行采用一種漸變背景，即網(wǎng)頁的背景從上至下由一種深顏色過渡到一種淺顏色，由于網(wǎng)頁的長度通常是不好由一種深顏色過渡到一種淺顏色，由于網(wǎng)頁的長度通常是不好估計的，所以無法用一幅背景圖片來做這種漸變背景，只能在估計的，所以無法用一幅背景圖片來做這種漸變背景，只能在網(wǎng)頁的上部用漸變的圖片做背景，下部使用用一種和圖片下部網(wǎng)頁的上部用漸變的圖片做背景，下部使用用一種和圖片下部顏色相同的顏色做背景色顏色相同的顏色做背景色p通過在通過在CSS中設(shè)置中設(shè)置body標記的背景顏色和背景圖片，標記的背景顏色和背景圖

22、片，并把背景圖片設(shè)置為橫向平鋪就可以實現(xiàn)漸變背景了。并把背景圖片設(shè)置為橫向平鋪就可以實現(xiàn)漸變背景了。pbodybackground:#666666 url(xxwlzx/body_bg.gif) repeat-x; 控制背景在盒子中的位置及是否平鋪控制背景在盒子中的位置及是否平鋪 p在在html中，背景圖像只能平鋪，而在中，背景圖像只能平鋪，而在CSS中，中，背景圖像能做到精確定位，允許不平鋪，效果背景圖像能做到精確定位，允許不平鋪，效果就像普通的圖像元素一樣。因此有人建議所有就像普通的圖像元素一樣。因此有人建議所有的網(wǎng)頁圖像都作為元素的的網(wǎng)頁圖像都作為元素的CSS背景引入。例如背景引入。例如

23、下面的網(wǎng)頁的背景就是用讓背景圖片不平鋪并下面的網(wǎng)頁的背景就是用讓背景圖片不平鋪并且定位于右下角實現(xiàn)的。且定位于右下角實現(xiàn)的。body background: #F7F2DF url(cha.jpg) no-repeat right bottom ;li元素的背景應(yīng)用元素的背景應(yīng)用p通過背景圖片不平鋪的技術(shù)還可以用來改變列通過背景圖片不平鋪的技術(shù)還可以用來改變列表的項目符號，雖然使用列表元素表的項目符號，雖然使用列表元素ul的的CSS屬性屬性list-style-image:url(arrow.gif)可以將列表項前面可以將列表項前面的小黑點改變成自定義的小圖片，但無法調(diào)整的小黑點改變成自定義的

24、小圖片，但無法調(diào)整小圖片和列表文字之間的距離。小圖片和列表文字之間的距離。p要解決這個問題，可以將小圖片設(shè)置成要解決這個問題，可以將小圖片設(shè)置成li元素的元素的背景，不平鋪，且居左，為防止文字遮住圖片，背景，不平鋪，且居左，為防止文字遮住圖片，將將li元素的左元素的左padding設(shè)置成設(shè)置成20px，這樣還可通，這樣還可通過調(diào)整左過調(diào)整左padding的值實現(xiàn)任意調(diào)整列表小圖片的值實現(xiàn)任意調(diào)整列表小圖片和文字之間的距離。和文字之間的距離。 ullist-style-type:none; libackground:url(arrow.gif) no-repeat 0px 3px;/*距左邊距左

25、邊0px，距上邊，距上邊3px*/padding-left:20px;可以看出，有了背景的精確定位能力，完全可以可以看出，有了背景的精確定位能力，完全可以使列表項目圖片符號出現(xiàn)在使列表項目圖片符號出現(xiàn)在li元素中的任意位置元素中的任意位置上。上。 多個元素背景的疊加多個元素背景的疊加 p背景圖片的疊加是很重要的背景圖片的疊加是很重要的CSS技術(shù)，當技術(shù)，當兩個元素是嵌套關(guān)系時，那么里面元素的兩個元素是嵌套關(guān)系時，那么里面元素的盒子背景的不透明部分將覆蓋在外面元素盒子背景的不透明部分將覆蓋在外面元素盒子背景之上，利用這一點，再結(jié)合對背盒子背景之上，利用這一點，再結(jié)合對背景圖片位置的控制，可以得到

26、滑動門技術(shù)。景圖片位置的控制，可以得到滑動門技術(shù)。下面以下面以4圖像可變寬圖像可變寬度圓角欄目框的制作度圓角欄目框的制作來介紹多個元素背景疊加的技巧來介紹多個元素背景疊加的技巧 圓角的設(shè)計圓角的設(shè)計p固定寬圓角固定寬圓角p可變寬圓角可變寬圓角盒子背景的重疊盒子背景的重疊這是圓角矩形的標題這是圓角矩形的標題#round background-image: url(xxwlzx/tly.gif);background-repeat: no-repeat;background-color: #00FF99;width: 244px;#round h3 background-image: url(xx

27、wlzx/tly2.gif);background-repeat: no-repeat;background-position: right top;text-align: center;padding: 12px;margin: 0px;#round p background-image: url(xxwlzx/tly4.gif);background-repeat: no-repeat;background-position: left bottom;margin: 0px;#round span background-image: url(xxwlzx/tly3.gif);backgro

28、und-repeat: no-repeat;background-position: right bottom;display: block;padding: 16px;font-size: 14px;line-height: 140%;color: #FF0000;最后再設(shè)置背景色最后再設(shè)置背景色p由于幾層背景的疊加，背景色只能放在最由于幾層背景的疊加，背景色只能放在最底層的盒子上，也就是對最外層的元素設(shè)底層的盒子上，也就是對最外層的元素設(shè)置背景色，這樣背景色就不會把背景圖片置背景色，這樣背景色就不會把背景圖片給覆蓋了。與此相反，為了讓內(nèi)容能放在給覆蓋了。與此相反，為了讓內(nèi)容能放在距邊框有一

29、定邊距的區(qū)域，必須設(shè)置距邊框有一定邊距的區(qū)域，必須設(shè)置padding值，而且值，而且padding值只能設(shè)置在最值只能設(shè)置在最里層的盒子上。里層的盒子上。p但這個圓角框沒有邊框，要制作帶有邊框但這個圓角框沒有邊框，要制作帶有邊框的可變寬度圓角框，需要采用的可變寬度圓角框，需要采用5圖像二維圖像二維滑動門法制作滑動門法制作 滑動門技術(shù)滑動門技術(shù) 圖片陰影，自適用寬度圓角導(dǎo)航條圖片陰影，自適用寬度圓角導(dǎo)航條 CSS圖像陰影圖像陰影自適應(yīng)寬度圓角導(dǎo)航條自適應(yīng)寬度圓角導(dǎo)航條p原理：背景圖片比盒子長一些原理：背景圖片比盒子長一些p背景圖片：背景圖片：p里面的盒子里面的盒子設(shè)置背景圖片為從右邊開始鋪設(shè)置背

30、景圖片為從右邊開始鋪p外面的盒子外面的盒子p設(shè)置背景圖片為從左邊開始鋪設(shè)置背景圖片為從左邊開始鋪p把里面的盒子放在外面盒子上方，則兩邊的圓把里面的盒子放在外面盒子上方，則兩邊的圓角都能顯示，同時，改變文字的多少，能使導(dǎo)角都能顯示，同時，改變文字的多少，能使導(dǎo)航條自動伸展，而圓角部分位于航條自動伸展，而圓角部分位于padding區(qū)域，區(qū)域，不會影響圓角不會影響圓角滑動門導(dǎo)航條代碼滑動門導(dǎo)航條代碼a font-size: 14px;color: #F1E474;text-decoration: none;background-image: url(xxwlzx/yuanjiao2.gif);height: 32px;padding-left: 24px;display: block;float: left;line-height: 32px;b background-image: url(xxwlzx/yuanjiao2.gif);background-position: right top;display: block;padding-right: 24px;a:hover