第4章3CSS盒子模型

1、基于基于WebWeb標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計(jì)CSSCSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v盒子模型是盒子模型是CSS的基石之一的基石之一，它指定元素如何顯它指定元素如何顯示以及示以及（在某種程度上）如何相互交互在某種程度上）如何相互交互v頁面上的每個(gè)元素都被瀏覽器看成是一個(gè)頁面上的每個(gè)元素都被瀏覽器看成是一個(gè)矩形的矩形的盒子盒子，這個(gè)盒子由元素的，這個(gè)盒子由元素的內(nèi)容內(nèi)容、填充填充、邊框邊框和和邊邊界界組成。組成。v網(wǎng)頁就是由許多個(gè)盒子通過不同的排列方式（上網(wǎng)頁就是由許多個(gè)盒子通過不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成。下排列，并列排列，嵌套排列）堆積而成。

2、CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v每個(gè)每個(gè)HTML元素都可以看作是一個(gè)裝了東西的盒元素都可以看作是一個(gè)裝了東西的盒子子v盒子里面的內(nèi)容到盒子的邊框之間的距離即盒子里面的內(nèi)容到盒子的邊框之間的距離即填充填充(padding),盒子本身有盒子本身有邊框邊框(border),而盒子邊框外而盒子邊框外和其它盒子之間，還有和其它盒子之間，還有邊界邊界(magin),如圖所示如圖所示v默認(rèn)情況下盒子的邊框是無，背景色是透明，所默認(rèn)情況下盒子的邊框是無，背景色是透明，所以我們?cè)谀J(rèn)情況下看不到盒子以我們?cè)谀J(rèn)情況下看不到盒子contentpadding-toppadding-bottom

3、padding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的計(jì)算元素盒子大小的計(jì)算一個(gè)元素實(shí)際寬度一個(gè)元素實(shí)際寬度=左邊界左邊框左填充內(nèi)容寬左邊界左邊框左填充內(nèi)容寬度右填充右邊框右邊界度右填充右邊框右邊界IE quirk模式下盒子的寬度模式下盒子的寬度v當(dāng)將文檔聲明當(dāng)將文檔聲明DOCTYPE刪除后，刪除后，IE 6對(duì)網(wǎng)頁的解釋對(duì)網(wǎng)頁的解釋會(huì)進(jìn)入會(huì)進(jìn)入quirk（怪異）模式，此時(shí)盒子的寬度

4、等于（怪異）模式，此時(shí)盒子的寬度等于左左邊界寬度右邊界邊界寬度右邊界v因此當(dāng)使用了盒子屬性后切忌刪除因此當(dāng)使用了盒子屬性后切忌刪除DOCTYPECSS盒子模型計(jì)算題盒子模型計(jì)算題v如果盒子里面嵌套有盒子，且兩個(gè)盒子都有邊框，那如果盒子里面嵌套有盒子，且兩個(gè)盒子都有邊框，那么兩個(gè)盒子邊框之間的距離等于外面盒子的填充值么兩個(gè)盒子邊框之間的距離等于外面盒子的填充值里面盒子的邊界值里面盒子的邊界值#box1 background-color: #ddd;margin:15px;padding:5px; #box2 color: black;background-color: #aaa;margin:

5、20px;padding: 10px 0px 10px 10px;width:100px;bodyborder:1px dotted #FF0000這是里面的盒這是里面的盒子子邊框邊框border屬性屬性v盒子模型的盒子模型的margin和和padding屬性比較簡(jiǎn)單，只能設(shè)屬性比較簡(jiǎn)單，只能設(shè)置寬度值，最多分別對(duì)上、右、下、左設(shè)置寬度值。置寬度值，最多分別對(duì)上、右、下、左設(shè)置寬度值。而邊框而邊框border則可以設(shè)置寬度、顏色和樣式。則可以設(shè)置寬度、顏色和樣式。 v分別是分別是border-width（寬度）、（寬度）、border-color（顏色）（顏色）和和border-style（樣

6、式）其中（樣式）其中border-style屬性可以將屬性可以將邊框設(shè)置為實(shí)線（邊框設(shè)置為實(shí)線（solid）、虛線（）、虛線（dashed）、點(diǎn)劃線）、點(diǎn)劃線（dotted）、雙線（）、雙線（double）等效果）等效果 邊框邊框border屬性屬性v邊框邊框border屬性有個(gè)有趣的特點(diǎn)，即兩條交匯的邊框?qū)傩杂袀€(gè)有趣的特點(diǎn)，即兩條交匯的邊框之間是一個(gè)斜角，我們可以通過為邊框設(shè)置不同的顏之間是一個(gè)斜角，我們可以通過為邊框設(shè)置不同的顏色，再利用這個(gè)斜角，制作出像三角形一樣的效果色，再利用這個(gè)斜角，制作出像三角形一樣的效果 內(nèi) 容填充填充padding屬性屬性v 填充填充padding屬性，也稱為

7、盒子的內(nèi)邊距。就是盒子屬性，也稱為盒子的內(nèi)邊距。就是盒子邊框到內(nèi)容之間的距離，和表格的填充屬性邊框到內(nèi)容之間的距離，和表格的填充屬性（cellpadding）比較相似。如果填充屬性為）比較相似。如果填充屬性為0，則盒，則盒子的邊框會(huì)緊挨著內(nèi)容，這樣通常不美觀。子的邊框會(huì)緊挨著內(nèi)容，這樣通常不美觀。v 當(dāng)對(duì)盒子設(shè)置了背景顏色或背景圖像后，那么背景當(dāng)對(duì)盒子設(shè)置了背景顏色或背景圖像后，那么背景會(huì)覆蓋會(huì)覆蓋padding和內(nèi)容組成的范圍，并且默認(rèn)情況下和內(nèi)容組成的范圍，并且默認(rèn)情況下背景圖像是以背景圖像是以padding的左上角為基準(zhǔn)點(diǎn)在盒子中平的左上角為基準(zhǔn)點(diǎn)在盒子中平鋪的鋪的 盒子模型的特性盒子模

8、型的特性v邊界值邊界值margin可為負(fù)，填充可為負(fù)，填充padding不可為負(fù)不可為負(fù)v邊框邊框border默認(rèn)值為默認(rèn)值為0，即不顯示，即不顯示v行內(nèi)元素，如行內(nèi)元素，如a，定義上下邊界不影響行高，定義上下邊界不影響行高對(duì)盒子模型的思考對(duì)盒子模型的思考v邊框是實(shí)的，我們可以看到實(shí)實(shí)在在的邊框，而填充邊框是實(shí)的，我們可以看到實(shí)實(shí)在在的邊框，而填充和邊界都是虛的，我們只能看到他們對(duì)元素的影響和邊界都是虛的，我們只能看到他們對(duì)元素的影響v盒子模型中只能設(shè)置兩類顏色，即盒子模型中只能設(shè)置兩類顏色，即邊框顏色邊框顏色和和背景顏背景顏色色v盒子模型可設(shè)置三類距離，即邊界距離盒子模型可設(shè)置三類距離，即邊

9、界距離margin，填充，填充距離距離padding和邊框值和邊框值border屬性值的簡(jiǎn)寫形式屬性值的簡(jiǎn)寫形式 v方法是按照規(guī)定的順序，給出方法是按照規(guī)定的順序，給出2個(gè)、個(gè)、3個(gè)或者個(gè)或者4個(gè)屬個(gè)屬性值，它們的含義將有所區(qū)別，具體含義如下：性值，它們的含義將有所區(qū)別，具體含義如下： 如果給出如果給出2個(gè)屬性值，前者表示個(gè)屬性值，前者表示上下邊框上下邊框的屬性，的屬性，后者表示后者表示左右邊框左右邊框的屬性；的屬性； 如果給出如果給出3個(gè)屬性值，前者表示個(gè)屬性值，前者表示上邊框上邊框的屬性，中的屬性，中間的數(shù)值表示間的數(shù)值表示左右邊框左右邊框的屬性，后者表示的屬性，后者表示下邊框下邊框的屬性

10、；的屬性； 如果給出如果給出4個(gè)屬性值，依次表示個(gè)屬性值，依次表示上上、右右、下下、左左邊邊框的屬性，即順時(shí)針排序。框的屬性，即順時(shí)針排序。各種元素盒子屬性的默認(rèn)值各種元素盒子屬性的默認(rèn)值v大部分大部分html元素的盒子屬性元素的盒子屬性(margin, padding)默默認(rèn)值都為認(rèn)值都為0；v有少數(shù)有少數(shù)html元素的元素的(margin, padding)瀏覽器默認(rèn)瀏覽器默認(rèn)值不為值不為0，例如：，例如：body，p，ul，li，form標(biāo)記等，標(biāo)記等，因此我們有時(shí)有必要先設(shè)置它們的這些屬性為因此我們有時(shí)有必要先設(shè)置它們的這些屬性為0。vInput元素的邊框?qū)傩阅J(rèn)不為元素的邊框?qū)傩阅J(rèn)

11、不為0，我們可以設(shè)置，我們可以設(shè)置為為0達(dá)到美化表單中輸入框和按鈕的目的。達(dá)到美化表單中輸入框和按鈕的目的。4.5.2 盒子模型的應(yīng)用盒子模型的應(yīng)用v1. 美化表單美化表單v網(wǎng)頁中的表單控件在默認(rèn)情況下背景都是灰色的，文網(wǎng)頁中的表單控件在默認(rèn)情況下背景都是灰色的，文本框邊框是粗線條帶立體感的，不夠美觀。下列代碼本框邊框是粗線條帶立體感的，不夠美觀。下列代碼通過通過CSS改變表單的邊框樣式、顏色和背景顏色讓文改變表單的邊框樣式、顏色和背景顏色讓文本框，按鈕等變得漂亮些。本框，按鈕等變得漂亮些。 用盒子美化表格用盒子美化表格v讓表格的外邊框?yàn)樽尡砀竦耐膺吙驗(yàn)?象素象素v首先用間距制作首先用間距制作

12、1像素邊框的表格，然后用像素邊框的表格，然后用css為為table元素加一個(gè)元素加一個(gè)1象素寬的象素寬的borderv制作制作1象素虛線邊框象素虛線邊框v首先將表格的邊框和間距設(shè)為首先將表格的邊框和間距設(shè)為0，然后設(shè)置，然后設(shè)置table的的CSS上邊框和左邊框?yàn)樯线吙蚝妥筮吙驗(yàn)?象素虛線，再設(shè)置象素虛線，再設(shè)置td的的css下下邊框和右邊框?yàn)檫吙蚝陀疫吙驗(yàn)?象素虛線象素虛線盒子的定位盒子的定位盒子的三種定位形式盒子的三種定位形式v在標(biāo)準(zhǔn)流下的定位在標(biāo)準(zhǔn)流下的定位v在浮動(dòng)屬性下的定位在浮動(dòng)屬性下的定位v在定位屬性下的定位在定位屬性下的定位v除非設(shè)置浮動(dòng)屬性或定位屬性，否則所有盒子都是除非設(shè)置浮

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

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

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

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

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

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

19、切換的情況屬性切換的情況1.讓一個(gè)讓一個(gè)inline元素從新行開始；元素從新行開始；2.讓塊元素和其他元素保持在一行上；讓塊元素和其他元素保持在一行上；3.控制控制inline元素的寬度元素的寬度;4.控制控制inline元素的高度（對(duì)導(dǎo)航條特別有用）；元素的高度（對(duì)導(dǎo)航條特別有用）；5. 無須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的無須設(shè)定寬度即可為一個(gè)塊元素設(shè)定與文字同寬的背景色背景色 標(biāo)準(zhǔn)流下定位的應(yīng)用制作豎直導(dǎo)航菜單標(biāo)準(zhǔn)流下定位的應(yīng)用制作豎直導(dǎo)航菜單#nav a font-size: 14px;color: #333333;text-decoration: none;backgroun

20、d-color: #CCCCCC;display: block;width:140px;padding: 6px 10px 4px;border: 1px solid #000000;margin: 2px;#nav a:hover color: #FFFFFF;background-color: #666666;盒子的盒子的marginmargin疊加問題疊加問題盒子的盒子的margin在標(biāo)準(zhǔn)流中的計(jì)算在標(biāo)準(zhǔn)流中的計(jì)算v 實(shí)驗(yàn)實(shí)驗(yàn)1行內(nèi)元素之間的水平行內(nèi)元素之間的水平margin span.leftmargin-right:30px;background-color:#a9d6ff;span

21、.rightmargin-left:40px;background-color:#eeb0b0;行內(nèi)元素之間的水平行內(nèi)元素之間的水平marginv行內(nèi)元素之間的水平行內(nèi)元素之間的水平margin不會(huì)疊加不會(huì)疊加span 2span 1margin-rightmargin-left 實(shí)驗(yàn)2塊級(jí)元素之間的豎直margin 塊元素1塊元素2塊元素塊元素1塊元素塊元素2塊元素塊元素1塊元素塊元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px塊級(jí)元素之間的上下塊級(jí)元素之間的上下margin空白邊疊加空白邊疊加v 當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)，若

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

23、ng來調(diào)整，不要用里面盒子的來調(diào)整，不要用里面盒子的margin，這樣可以避免空白邊疊加的現(xiàn)象出現(xiàn)，這樣可以避免空白邊疊加的現(xiàn)象出現(xiàn) 嵌套盒子之間的嵌套盒子之間的marginv盒子在標(biāo)準(zhǔn)流中的定位原則盒子在標(biāo)準(zhǔn)流中的定位原則 實(shí)驗(yàn)實(shí)驗(yàn)3嵌套盒子之間的嵌套盒子之間的margin 嵌套盒子在嵌套盒子在IE和和Firefox中的不同顯示中的不同顯示v 當(dāng)一個(gè)塊元素包含在另一個(gè)塊元素中時(shí)，若對(duì)父塊設(shè)置高當(dāng)一個(gè)塊元素包含在另一個(gè)塊元素中時(shí)，若對(duì)父塊設(shè)置高度，但父塊的高度不足以容納子塊時(shí)，度，但父塊的高度不足以容納子塊時(shí)，IE將使父塊的高度將使父塊的高度自動(dòng)伸展，達(dá)到能容納子塊的最小高度為止；若同時(shí)設(shè)置自

24、動(dòng)伸展，達(dá)到能容納子塊的最小高度為止；若同時(shí)設(shè)置了子塊高度，了子塊高度，IE有時(shí)使子塊高度自動(dòng)壓縮，直到能容納內(nèi)有時(shí)使子塊高度自動(dòng)壓縮，直到能容納內(nèi)容的最小高度為止。而容的最小高度為止。而Firefox對(duì)父塊和子塊均以定義的高對(duì)父塊和子塊均以定義的高度為準(zhǔn)，父塊高度不會(huì)伸展，任其子塊露在外面，子塊高度為準(zhǔn)，父塊高度不會(huì)伸展，任其子塊露在外面，子塊高度也不會(huì)壓縮。度也不會(huì)壓縮。 v從這里可以看出，從這里可以看出，F(xiàn)irefox對(duì)元素的高度解釋嚴(yán)格按照對(duì)元素的高度解釋嚴(yán)格按照我們?cè)O(shè)定的高度執(zhí)行，而我們?cè)O(shè)定的高度執(zhí)行，而IE對(duì)元素高度的設(shè)定有點(diǎn)自對(duì)元素高度的設(shè)定有點(diǎn)自作主張的味道，它總是使標(biāo)準(zhǔn)流中子

25、元素的盒子包含作主張的味道，它總是使標(biāo)準(zhǔn)流中子元素的盒子包含在父元素盒子當(dāng)中。在父元素盒子當(dāng)中。 背景的控制背景的控制 CSS的背景屬性的背景屬性v 背景（背景（background）是網(wǎng)頁中常用的一種表現(xiàn)方法，無）是網(wǎng)頁中常用的一種表現(xiàn)方法，無論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁帶來豐論是單純的背景顏色還是背景圖片，都能為網(wǎng)頁帶來豐富的視覺效果，富的視覺效果，HTML的很多元素都具有的很多元素都具有bgcolor和和backgroud屬性，可以設(shè)置背景顏色和背景圖片，如屬性，可以設(shè)置背景顏色和背景圖片，如（table、td等），但形式比較單一，對(duì)背景圖片的設(shè)定，等），但形式比較單一，對(duì)

26、背景圖片的設(shè)定，只支持在只支持在X軸和軸和Y軸都平鋪的方式，因此，如果同時(shí)設(shè)軸都平鋪的方式，因此，如果同時(shí)設(shè)置了背景顏色和背景圖片，那么背景顏色將被背景圖片置了背景顏色和背景圖片，那么背景顏色將被背景圖片擋住，以背景圖片來顯示。擋住，以背景圖片來顯示。v 而而CSS對(duì)元素的背景設(shè)置，則提供了更多的途徑，如背對(duì)元素的背景設(shè)置，則提供了更多的途徑，如背景圖片既可以平鋪也可以不平鋪，還可以在景圖片既可以平鋪也可以不平鋪，還可以在X軸平鋪或軸平鋪或在在Y軸平鋪，當(dāng)背景圖片不平鋪時(shí)，并不會(huì)完全擋住背軸平鋪，當(dāng)背景圖片不平鋪時(shí)，并不會(huì)完全擋住背景顏色，因此可以綜合設(shè)置背景顏色和背景圖片達(dá)到希景顏色，因此可

27、以綜合設(shè)置背景顏色和背景圖片達(dá)到希望的效果。望的效果。v CSS的背景屬性是的背景屬性是backgroud或以或以backgroud開頭開頭 CSS的背景屬性的背景屬性屬性屬性描述描述可用值可用值background設(shè)置背景的所有控制選項(xiàng)，是其他設(shè)置背景的所有控制選項(xiàng)，是其他所有背景屬性的縮寫所有背景屬性的縮寫其他背景屬性的值的集合其他背景屬性的值的集合background-color設(shè)置背景顏色設(shè)置背景顏色rgb顏色顏色命名顏色命名顏色16進(jìn)制顏色進(jìn)制顏色background-image設(shè)置背景圖片設(shè)置背景圖片urlbackground-repeat設(shè)置背景圖片的平鋪方式設(shè)置背景圖片的平鋪方

28、式repeat（完全平鋪）（完全平鋪）repeat-x（橫向平鋪）（橫向平鋪）repeat-y（縱向平鋪）（縱向平鋪）no-repeat（不平鋪）（不平鋪）background-attachment設(shè)置背景圖片固定還是隨設(shè)置背景圖片固定還是隨內(nèi)容滾動(dòng)內(nèi)容滾動(dòng)scroll（默認(rèn)值）（默認(rèn)值）fixedbackground-position設(shè)置背景圖片顯示的起始設(shè)置背景圖片顯示的起始位置位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各個(gè)背景屬性的默認(rèn)值各個(gè)背景屬性的默認(rèn)值vbackground-color: transparent 透

29、明模式透明模式vbackground-image: none vbackground-repeat: repeat平鋪平鋪 vbackground-attachment: scroll vbackground-position: 0% 0%background屬性的縮寫屬性的縮寫vbackground屬性是所有背景屬性的縮寫形式，就像屬性是所有背景屬性的縮寫形式，就像font屬性一樣，其縮寫順序?yàn)椋簩傩砸粯?，其縮寫順序?yàn)椋簐background: background-color | background-image | background-repeat | background-attac

30、hment | background-positionv如如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;DW中的背景設(shè)置面板中的背景設(shè)置面板background-color:#0099ccbackground-image: url(img/bottom.gif)background-repeat: no-repeatbackground-position: right bottombackground-attachment: no-repeat背景的運(yùn)用技巧背景的運(yùn)用技巧背景的運(yùn)用技巧背景的運(yùn)用技巧v同時(shí)運(yùn)用背景

31、顏色和背景圖片同時(shí)運(yùn)用背景顏色和背景圖片v控制背景在盒子中的位置及是否平鋪控制背景在盒子中的位置及是否平鋪v多個(gè)元素背景的疊加多個(gè)元素背景的疊加 v滑動(dòng)門技術(shù)滑動(dòng)門技術(shù) v背景位置的控制實(shí)現(xiàn)圖片的翻轉(zhuǎn)背景位置的控制實(shí)現(xiàn)圖片的翻轉(zhuǎn)v圓角的設(shè)計(jì)方法總結(jié)圓角的設(shè)計(jì)方法總結(jié) 同時(shí)運(yùn)用背景顏色和背景圖片同時(shí)運(yùn)用背景顏色和背景圖片v目前網(wǎng)頁中流行采用一種漸變背景，即網(wǎng)頁的背景從上至下由一種深顏色目前網(wǎng)頁中流行采用一種漸變背景，即網(wǎng)頁的背景從上至下由一種深顏色過渡到一種淺顏色，由于網(wǎng)頁的長(zhǎng)度通常是不好估計(jì)的，所以無法用一幅背過渡到一種淺顏色，由于網(wǎng)頁的長(zhǎng)度通常是不好估計(jì)的，所以無法用一幅背景圖片來做這種漸變

32、背景，只能在網(wǎng)頁的上部用漸變的圖片做背景，下部使景圖片來做這種漸變背景，只能在網(wǎng)頁的上部用漸變的圖片做背景，下部使用用一種和圖片下部顏色相同的顏色做背景色用用一種和圖片下部顏色相同的顏色做背景色v通過在通過在CSS中設(shè)置中設(shè)置body標(biāo)記的背景顏色和背景圖片，并把背景圖片標(biāo)記的背景顏色和背景圖片，并把背景圖片設(shè)置為橫向平鋪就可以實(shí)現(xiàn)漸變背景了。設(shè)置為橫向平鋪就可以實(shí)現(xiàn)漸變背景了。vbodybackground:#666666 url(xxwlzx/body_bg.gif) repeat-x; 控制背景在盒子中的位置及是否平鋪控制背景在盒子中的位置及是否平鋪 v 在在html中，背景圖像只能平鋪

33、，而在中，背景圖像只能平鋪，而在CSS中，背景圖像能中，背景圖像能做到精確定位，允許不平鋪，效果就像普通的圖像元素一做到精確定位，允許不平鋪，效果就像普通的圖像元素一樣。因此有人建議所有的網(wǎng)頁圖像都作為元素的樣。因此有人建議所有的網(wǎng)頁圖像都作為元素的CSS背景背景引入。例如下面的網(wǎng)頁的背景就是用讓背景圖片不平鋪并引入。例如下面的網(wǎng)頁的背景就是用讓背景圖片不平鋪并且定位于右下角實(shí)現(xiàn)的。且定位于右下角實(shí)現(xiàn)的。body background: #F7F2DF url(cha.jpg) no-repeat right bottom ;li元素的背景應(yīng)用元素的背景應(yīng)用v 通過背景圖片不平鋪的技術(shù)還可以用

34、來改變列表的項(xiàng)目符通過背景圖片不平鋪的技術(shù)還可以用來改變列表的項(xiàng)目符號(hào)，雖然使用列表元素號(hào)，雖然使用列表元素ul的的CSS屬性屬性list-style-image:url(arrow.gif)可以將列表項(xiàng)前面的小黑點(diǎn)改變成自可以將列表項(xiàng)前面的小黑點(diǎn)改變成自定義的小圖片，但無法調(diào)整小圖片和列表文字之間的距離。定義的小圖片，但無法調(diào)整小圖片和列表文字之間的距離。v 要解決這個(gè)問題，可以將小圖片設(shè)置成要解決這個(gè)問題，可以將小圖片設(shè)置成li元素的背景，不元素的背景，不平鋪，且居左，為防止文字遮住圖片，將平鋪，且居左，為防止文字遮住圖片，將li元素的左元素的左padding設(shè)置成設(shè)置成20px，這樣還可

35、通過調(diào)整左，這樣還可通過調(diào)整左padding的值實(shí)的值實(shí)現(xiàn)任意調(diào)整列表小圖片和文字之間的距離?，F(xiàn)任意調(diào)整列表小圖片和文字之間的距離。 ullist-style-type:none; libackground:url(arrow.gif) no-repeat 0px 3px;/*距左邊距左邊0px，距上邊距上邊3px*/padding-left:20px;可以看出，有了背景的精確定位能力，完全可以使列表項(xiàng)目可以看出，有了背景的精確定位能力，完全可以使列表項(xiàng)目圖片符號(hào)出現(xiàn)在圖片符號(hào)出現(xiàn)在li元素中的任意位置上。元素中的任意位置上。 多個(gè)元素背景的疊加多個(gè)元素背景的疊加 v背景圖片的疊加是很重要的背

36、景圖片的疊加是很重要的CSS技術(shù)，當(dāng)兩個(gè)元素是技術(shù)，當(dāng)兩個(gè)元素是嵌套關(guān)系時(shí)，那么里面元素的盒子背景的不透明部分嵌套關(guān)系時(shí)，那么里面元素的盒子背景的不透明部分將覆蓋在外面元素盒子背景之上，利用這一點(diǎn)，再結(jié)將覆蓋在外面元素盒子背景之上，利用這一點(diǎn)，再結(jié)合對(duì)背景圖片位置的控制，可以得到滑動(dòng)門技術(shù)。下合對(duì)背景圖片位置的控制，可以得到滑動(dòng)門技術(shù)。下面以面以4圖像可變寬圖像可變寬度圓角欄目框的制作來介紹多個(gè)元度圓角欄目框的制作來介紹多個(gè)元素背景疊加的技巧素背景疊加的技巧 圓角的設(shè)計(jì)圓角的設(shè)計(jì)v固定寬圓角固定寬圓角v可變寬圓角可變寬圓角4圖像可變寬度圓角欄目框圖像可變寬度圓角欄目框 這是圓角矩形的標(biāo)題這是圓

37、角矩形的標(biāo)題4圖像可變寬度圓角欄目框圖像可變寬度圓角欄目框 #round background-image: url(xxwlzx/tly.gif);background-repeat: no-repeat;background-color: #00FF99;width: 244px;#round h3 background-image: url(xxwlzx/tly2.gif);background-repeat: no-repeat;background-position: right top;text-align: center;padding: 12px;margin: 0px;#ro

38、und 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);background-repeat: no-repeat;background-position: right bottom;display: block;padding: 16px;font-size: 14px;line-height: 140%;colo

39、r: #FF0000;最后再設(shè)置背景色最后再設(shè)置背景色v由于幾層背景的疊加，背景色只能放在最底層的盒子由于幾層背景的疊加，背景色只能放在最底層的盒子上，也就是對(duì)最外層的元素設(shè)置背景色，這樣背景色上，也就是對(duì)最外層的元素設(shè)置背景色，這樣背景色就不會(huì)把背景圖片給覆蓋了。與此相反，為了讓內(nèi)容就不會(huì)把背景圖片給覆蓋了。與此相反，為了讓內(nèi)容能放在距邊框有一定邊距的區(qū)域，必須設(shè)置能放在距邊框有一定邊距的區(qū)域，必須設(shè)置padding值，而且值，而且padding值只能設(shè)置在最里層的盒子上。值只能設(shè)置在最里層的盒子上。v但這個(gè)圓角框沒有邊框，要制作帶有邊框的可變寬度但這個(gè)圓角框沒有邊框，要制作帶有邊框的可變寬

40、度圓角框，需要采用圓角框，需要采用5圖像二維滑動(dòng)門法制作圖像二維滑動(dòng)門法制作 滑動(dòng)門技術(shù)背景的高級(jí)運(yùn)用滑動(dòng)門技術(shù)背景的高級(jí)運(yùn)用 圖片陰影，自適用寬度圓角導(dǎo)航條 1. 圖像陰影圖像陰影v陰影是一種很流行、很有吸引力的圖像處理技巧，它陰影是一種很流行、很有吸引力的圖像處理技巧，它給平淡的設(shè)計(jì)增加了深度，形成立體感。使用圖像處給平淡的設(shè)計(jì)增加了深度，形成立體感。使用圖像處理軟件很容易給圖像增添陰影。但是，可以使用理軟件很容易給圖像增添陰影。但是，可以使用CSS產(chǎn)生簡(jiǎn)單陰影效果，而不需要修改底層的圖像。通過產(chǎn)生簡(jiǎn)單陰影效果，而不需要修改底層的圖像。通過滑動(dòng)門技術(shù)制作的陰影能自適應(yīng)圖像的大小，即不管滑動(dòng)

41、門技術(shù)制作的陰影能自適應(yīng)圖像的大小，即不管圖像是大是小都能為它添加陰影效果。圖像是大是小都能為它添加陰影效果。 滑動(dòng)門制作圖片陰影原理圖滑動(dòng)門制作圖片陰影原理圖 透透 明明圖圖 像像圖圖 像像圖圖 像像圖圖 像像2. 自適應(yīng)寬度圓角導(dǎo)航條自適應(yīng)寬度圓角導(dǎo)航條v原理：背景圖片比盒子長(zhǎng)一些原理：背景圖片比盒子長(zhǎng)一些v背景圖片：背景圖片：v里面的盒子里面的盒子設(shè)置背景圖片為從右邊開始鋪設(shè)置背景圖片為從右邊開始鋪v外面的盒子外面的盒子v設(shè)置背景圖片為從左邊開始鋪設(shè)置背景圖片為從左邊開始鋪v把里面的盒子放在外面盒子上方，則兩邊的圓角把里面的盒子放在外面盒子上方，則兩邊的圓角都能顯示，同時(shí)，改變文字的多少

42、，能使導(dǎo)航條都能顯示，同時(shí)，改變文字的多少，能使導(dǎo)航條自動(dòng)伸展，而圓角部分位于自動(dòng)伸展，而圓角部分位于padding區(qū)域，不會(huì)影區(qū)域，不會(huì)影響圓角響圓角滑動(dòng)門導(dǎo)航條代碼滑動(dòng)門導(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/y

43、uanjiao2.gif);background-position: right top;display: block;padding-right: 24px;a:hover color: #FFFFFF;首首 頁頁 中心簡(jiǎn)介中心簡(jiǎn)介 政策法規(guī)政策法規(guī) 常用下載常用下載 為您服務(wù)為您服務(wù) 技術(shù)支持和服務(wù)技術(shù)支持和服務(wù)背景圖案的翻轉(zhuǎn)控制背景的顯示區(qū)域背景圖案的翻轉(zhuǎn)控制背景的顯示區(qū)域 v通過背景定位技術(shù)可使背景圖片出現(xiàn)在盒子的任意位通過背景定位技術(shù)可使背景圖片出現(xiàn)在盒子的任意位置上，如果盒子沒有背景那么大，那么只能顯示背景置上，如果盒子沒有背景那么大，那么只能顯示背景圖的一部分，利用這一點(diǎn)，我們可

44、以將多個(gè)背景圖片圖的一部分，利用這一點(diǎn)，我們可以將多個(gè)背景圖片放置在一個(gè)大的背景圖里，讓每個(gè)元素只顯示這張大放置在一個(gè)大的背景圖里，讓每個(gè)元素只顯示這張大背景圖的一部分，例如制作導(dǎo)航條時(shí)，可以讓鏈接狀背景圖的一部分，例如制作導(dǎo)航條時(shí)，可以讓鏈接狀態(tài)顯示背景圖的上一部分，鼠標(biāo)滑過時(shí)顯示背景圖的態(tài)顯示背景圖的上一部分，鼠標(biāo)滑過時(shí)顯示背景圖的下一部分，這就是背景的翻轉(zhuǎn)，使我們只用一幅圖片下一部分，這就是背景的翻轉(zhuǎn)，使我們只用一幅圖片就能實(shí)現(xiàn)背景圖的切換。就能實(shí)現(xiàn)背景圖的切換。通過背景圖片位置控制實(shí)現(xiàn)圖片翻轉(zhuǎn)通過背景圖片位置控制實(shí)現(xiàn)圖片翻轉(zhuǎn)#nav li acolor:#FFFFFF;text-dec

45、oration:none;padding-top:7px;display:block;width:97px;height:19px;text-align:center;background:url(img/nav.gif);margin-left:2px;#nav li a:hoverbackground:url(img/nav.gif); background-position:0px -26px;/* background-position:left center;*/color:#FFFFFF; 將滑動(dòng)門技術(shù)和背景圖片翻轉(zhuǎn)結(jié)合的例子將滑動(dòng)門技術(shù)和背景圖片翻轉(zhuǎn)結(jié)合的例子a:hover ba

46、ckground-position:100% -42px;a:hover bbackground-position:0 -42px;color: #FF0000; CSS CSS圓角設(shè)計(jì)圓角設(shè)計(jì)圓角的設(shè)計(jì)方法圓角的設(shè)計(jì)方法v圓角在網(wǎng)頁設(shè)計(jì)中讓人又愛又恨，一方面設(shè)計(jì)師為追圓角在網(wǎng)頁設(shè)計(jì)中讓人又愛又恨，一方面設(shè)計(jì)師為追求美觀的效果經(jīng)常需要借助于圓角，另一方面為了在求美觀的效果經(jīng)常需要借助于圓角，另一方面為了在網(wǎng)頁中設(shè)計(jì)圓角又不得不增添很多工作量。網(wǎng)頁中設(shè)計(jì)圓角又不得不增添很多工作量。 v制作固定寬度的圓角（不帶邊框的、帶邊框的）制作固定寬度的圓角（不帶邊框的、帶邊框的）v制作可變寬度圓角（不帶邊框

47、的、帶邊框的）制作可變寬度圓角（不帶邊框的、帶邊框的）v不用圖片做圓角不用圖片做圓角 1. 制作固定寬度的圓角框制作固定寬度的圓角框v用用CSS制作不帶邊框的固定寬度圓角框（如圖制作不帶邊框的固定寬度圓角框（如圖4-57左左所示）至少需要兩個(gè)盒子，一個(gè)盒子放置頂部的圓角所示）至少需要兩個(gè)盒子，一個(gè)盒子放置頂部的圓角圖案，另一個(gè)盒子放置底部的圓角圖案，并使它位于圖案，另一個(gè)盒子放置底部的圓角圖案，并使它位于盒子底部。把這兩個(gè)盒子疊放在一起，再對(duì)欄目框設(shè)盒子底部。把這兩個(gè)盒子疊放在一起，再對(duì)欄目框設(shè)置和圓角相同的背景色就可以了置和圓角相同的背景色就可以了 v制作帶邊框的固定寬度圓角框（如圖制作帶邊

48、框的固定寬度圓角框（如圖4-57右所示）則右所示）則至少需要三個(gè)盒子，最底層的盒子放置圓角框中部的至少需要三個(gè)盒子，最底層的盒子放置圓角框中部的邊框和背景組成的圖案，并使它垂直平鋪，上面兩層邊框和背景組成的圖案，并使它垂直平鋪，上面兩層的盒子分別放置頂部的圓角和底部的圓角，這樣在頂?shù)暮凶臃謩e放置頂部的圓角和底部的圓角，這樣在頂部和底部圓角圖片就遮蓋了中部的圖案，形成了完整部和底部圓角圖片就遮蓋了中部的圖案，形成了完整的圓角框的圓角框 2. 制作可變寬度圓角制作可變寬度圓角 v制作可變寬度不帶邊框的圓角框就是前面介紹的制作可變寬度不帶邊框的圓角框就是前面介紹的4圖圖像法制作圓角框，而要制作帶邊框

49、的可變寬度圓角則像法制作圓角框，而要制作帶邊框的可變寬度圓角則要采用要采用5圖像二維滑動(dòng)門方法圖像二維滑動(dòng)門方法 3. 不用圖片做圓角山頂角方法不用圖片做圓角山頂角方法v如果不想用圖片做圓角，那也是可以實(shí)現(xiàn)的，這需要如果不想用圖片做圓角，那也是可以實(shí)現(xiàn)的，這需要一種稱為山頂角一種稱為山頂角(mountaintop corner)的圓角制作方法，的圓角制作方法，所謂山頂角，就是說不是純粹意義上的平滑圓角，而所謂山頂角，就是說不是純粹意義上的平滑圓角，而是通過幾個(gè)是通過幾個(gè)1像素高的像素高的div（水平細(xì)線）疊放起來形成（水平細(xì)線）疊放起來形成視覺上的圓角，用這種方法做圓角一般采用視覺上的圓角，用

50、這種方法做圓角一般采用4個(gè)個(gè)div疊疊放，所以圓角的弧度不是很大。放，所以圓角的弧度不是很大。 3. 不用圖片做圓角山頂角方法不用圖片做圓角山頂角方法v如果把最上方一條細(xì)線的顏色改為黑色，再設(shè)置下面如果把最上方一條細(xì)線的顏色改為黑色，再設(shè)置下面三條細(xì)線的左右邊框是三條細(xì)線的左右邊框是1像素黑色，那么就出現(xiàn)了帶像素黑色，那么就出現(xiàn)了帶有邊框的圓角框效果了有邊框的圓角框效果了 4. 學(xué)習(xí)圓角制作的意義學(xué)習(xí)圓角制作的意義v由于人們的審美觀念決定了圓角比方角更具有親和力，由于人們的審美觀念決定了圓角比方角更具有親和力，使我們很多時(shí)候必須制作圓角框。另外，圓角框技術(shù)使我們很多時(shí)候必須制作圓角框。另外，圓

51、角框技術(shù)是制作其他不規(guī)則圖案欄目框的基礎(chǔ)。例如圖是制作其他不規(guī)則圖案欄目框的基礎(chǔ)。例如圖4-61所所示的欄目框，就可以把欄目框上面部分看成是上圓角，示的欄目框，就可以把欄目框上面部分看成是上圓角，下面部分看成是下圓角，再按照制作圓角框的思路制下面部分看成是下圓角，再按照制作圓角框的思路制作了。作了。 盒子的浮動(dòng)盒子的浮動(dòng)盒子的浮動(dòng)盒子的浮動(dòng) v在標(biāo)準(zhǔn)流中，塊級(jí)元素的盒子都是上下排列，行內(nèi)元在標(biāo)準(zhǔn)流中，塊級(jí)元素的盒子都是上下排列，行內(nèi)元素的盒子都是左右排列，如果僅僅按照標(biāo)準(zhǔn)流的方式素的盒子都是左右排列，如果僅僅按照標(biāo)準(zhǔn)流的方式進(jìn)行排列，就只有這幾種可能性，限制太大。進(jìn)行排列，就只有這幾種可能性，

52、限制太大。CSS的的制訂者也想到了這樣排列限制的問題，因此又給出了制訂者也想到了這樣排列限制的問題，因此又給出了浮動(dòng)和定位方式進(jìn)行盒子的排列，從而使排版的靈活浮動(dòng)和定位方式進(jìn)行盒子的排列，從而使排版的靈活性大大提高。性大大提高。v例如：有時(shí)希望相鄰塊級(jí)元素的盒子左右排列（所有例如：有時(shí)希望相鄰塊級(jí)元素的盒子左右排列（所有盒子浮動(dòng)）或者希望一個(gè)盒子被另一個(gè)盒子中的內(nèi)容盒子浮動(dòng)）或者希望一個(gè)盒子被另一個(gè)盒子中的內(nèi)容所環(huán)繞（一個(gè)盒子浮動(dòng)）做出圖文混排的效果，這時(shí)所環(huán)繞（一個(gè)盒子浮動(dòng)）做出圖文混排的效果，這時(shí)最簡(jiǎn)單的辦法就是運(yùn)用浮動(dòng)（最簡(jiǎn)單的辦法就是運(yùn)用浮動(dòng)（float）屬性使盒子在?。傩允购凶釉诟?/p>

53、動(dòng)方式下定位。動(dòng)方式下定位。 v在標(biāo)準(zhǔn)流中，一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，在標(biāo)準(zhǔn)流中，一個(gè)塊級(jí)元素在水平方向會(huì)自動(dòng)伸展，在它的父元素中占滿整個(gè)一行；而在豎直方向和其他在它的父元素中占滿整個(gè)一行；而在豎直方向和其他元素依次排列，不能并排，如圖元素依次排列，不能并排，如圖4-62所示。使用所示。使用“浮浮動(dòng)動(dòng)”方式后，這種排列方式就會(huì)發(fā)生改變。方式后，這種排列方式就會(huì)發(fā)生改變。vCSS中有一個(gè)中有一個(gè)float屬性，默認(rèn)值為屬性，默認(rèn)值為none，也就是標(biāo)準(zhǔn)，也就是標(biāo)準(zhǔn)流通常的情況，如果將流通常的情況，如果將float屬性的值設(shè)為屬性的值設(shè)為left或或right，元素就會(huì)向其父元素的左側(cè)或右

54、側(cè)靠緊，同時(shí)盒子的元素就會(huì)向其父元素的左側(cè)或右側(cè)靠緊，同時(shí)盒子的寬度不再伸展，而是收縮，在沒設(shè)置寬度時(shí)，會(huì)根據(jù)寬度不再伸展，而是收縮，在沒設(shè)置寬度時(shí)，會(huì)根據(jù)盒子里面的內(nèi)容來確定寬度。盒子里面的內(nèi)容來確定寬度。1. 一個(gè)盒子浮動(dòng)一個(gè)盒子浮動(dòng)v接下來在上述代碼中添加一條接下來在上述代碼中添加一條CSS代碼，使元素代碼，使元素“.son1”浮動(dòng)。代碼如下：浮動(dòng)。代碼如下：v.son1float:left; v此時(shí)顯示效果如圖此時(shí)顯示效果如圖4-63所示，可發(fā)現(xiàn)給所示，可發(fā)現(xiàn)給“.son1”添加添加浮動(dòng)屬性后，浮動(dòng)屬性后，“.son1”的寬度不再自動(dòng)伸展，而且不的寬度不再自動(dòng)伸展，而且不再占據(jù)原來瀏覽

55、器分配給它的位置。如果再在未浮動(dòng)再占據(jù)原來瀏覽器分配給它的位置。如果再在未浮動(dòng)的盒子的盒子Box-2中添一行文本，就會(huì)發(fā)現(xiàn)中添一行文本，就會(huì)發(fā)現(xiàn)“.son2”中的內(nèi)中的內(nèi)容是環(huán)繞著浮動(dòng)盒子的容是環(huán)繞著浮動(dòng)盒子的 總結(jié)：一個(gè)盒子浮動(dòng)后的特點(diǎn)總結(jié)：一個(gè)盒子浮動(dòng)后的特點(diǎn)v（1）浮動(dòng)后的盒子將以塊級(jí)元素顯示，但寬度不會(huì)）浮動(dòng)后的盒子將以塊級(jí)元素顯示，但寬度不會(huì)自動(dòng)伸展。自動(dòng)伸展。v（2）浮動(dòng)的盒子將脫離標(biāo)準(zhǔn)流，即不再占據(jù)瀏覽器）浮動(dòng)的盒子將脫離標(biāo)準(zhǔn)流，即不再占據(jù)瀏覽器原來分配給它的位置（原來分配給它的位置（IE有時(shí)例外）。有時(shí)例外）。v（3）未浮動(dòng)的盒子將占據(jù)浮動(dòng)盒子的位置，同時(shí)未）未浮動(dòng)的盒子將占據(jù)

56、浮動(dòng)盒子的位置，同時(shí)未浮動(dòng)盒子內(nèi)的內(nèi)容會(huì)環(huán)繞浮動(dòng)后的盒子。浮動(dòng)盒子內(nèi)的內(nèi)容會(huì)環(huán)繞浮動(dòng)后的盒子。 提示：所謂提示：所謂“脫離標(biāo)準(zhǔn)流脫離標(biāo)準(zhǔn)流”是指元素不再占據(jù)在標(biāo)準(zhǔn)流下瀏是指元素不再占據(jù)在標(biāo)準(zhǔn)流下瀏覽器分配給它的空間，其他元素就好像這個(gè)元素不存在一樣。覽器分配給它的空間，其他元素就好像這個(gè)元素不存在一樣。例如圖例如圖4-63中，當(dāng)中，當(dāng)Box-1浮動(dòng)后，浮動(dòng)后，Box-2就頂?shù)搅司晚數(shù)搅薆ox-1的位的位置，相當(dāng)于置，相當(dāng)于Box-2視視Box-1不存在一樣。但是，浮動(dòng)元素并沒不存在一樣。但是，浮動(dòng)元素并沒有完全脫離標(biāo)準(zhǔn)流，這表現(xiàn)在浮動(dòng)盒子會(huì)影響未浮動(dòng)盒子中有完全脫離標(biāo)準(zhǔn)流，這表現(xiàn)在浮動(dòng)盒子會(huì)影

57、響未浮動(dòng)盒子中內(nèi)容的排列，例如內(nèi)容的排列，例如Box-2中的內(nèi)容會(huì)跟在中的內(nèi)容會(huì)跟在Box-1盒子之后進(jìn)行盒子之后進(jìn)行排列，而不會(huì)忽略排列，而不會(huì)忽略Box-1盒子的存在。盒子的存在。 2. 多個(gè)盒子浮動(dòng)多個(gè)盒子浮動(dòng)v多個(gè)盒子都浮動(dòng)后，就產(chǎn)生了塊級(jí)元素水平排列的效多個(gè)盒子都浮動(dòng)后，就產(chǎn)生了塊級(jí)元素水平排列的效果果 v 多個(gè)浮動(dòng)元素不會(huì)相互覆蓋，一個(gè)浮動(dòng)元素的外多個(gè)浮動(dòng)元素不會(huì)相互覆蓋，一個(gè)浮動(dòng)元素的外邊界（邊界（margin）碰到另一個(gè)浮動(dòng)元素的外邊界后便停）碰到另一個(gè)浮動(dòng)元素的外邊界后便停止運(yùn)動(dòng)。止運(yùn)動(dòng)。v 若包含的容器太窄，無法容納水平排列的多個(gè)浮若包含的容器太窄，無法容納水平排列的多個(gè)浮

58、動(dòng)元素，那么最后的浮動(dòng)盒子會(huì)向下移動(dòng)（圖動(dòng)元素，那么最后的浮動(dòng)盒子會(huì)向下移動(dòng)（圖4-68）。）。但如果浮動(dòng)元素的高度不同，那當(dāng)它們向下移動(dòng)時(shí)可但如果浮動(dòng)元素的高度不同，那當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被卡住能會(huì)被卡住 4.7.2 浮動(dòng)的清除浮動(dòng)的清除vclear是清除浮動(dòng)屬性，它的取值有是清除浮動(dòng)屬性，它的取值有l(wèi)eft、right、both和和none（默認(rèn)值），如果設(shè)置盒子的清除浮動(dòng)屬性（默認(rèn)值），如果設(shè)置盒子的清除浮動(dòng)屬性clear值為值為left或或right，表示該盒子的左邊或右邊不允，表示該盒子的左邊或右邊不允許有浮動(dòng)的對(duì)象。值設(shè)置為許有浮動(dòng)的對(duì)象。值設(shè)置為both則表示兩邊都不允許則表示

59、兩邊都不允許有浮動(dòng)對(duì)象，因此該盒子將會(huì)在瀏覽器中另起一行顯有浮動(dòng)對(duì)象，因此該盒子將會(huì)在瀏覽器中另起一行顯示示 vclear屬性既可以用在未浮動(dòng)的元素上，也可以用在浮屬性既可以用在未浮動(dòng)的元素上，也可以用在浮動(dòng)的元素上，如果對(duì)動(dòng)的元素上，如果對(duì)Box-3同時(shí)設(shè)置清除浮動(dòng)和浮動(dòng)，同時(shí)設(shè)置清除浮動(dòng)和浮動(dòng)，即：即：v.son3clear:both; float:left;v總結(jié)：清除浮動(dòng)是清除其它盒子浮動(dòng)對(duì)該元素的影響，總結(jié)：清除浮動(dòng)是清除其它盒子浮動(dòng)對(duì)該元素的影響，而設(shè)置浮動(dòng)是讓元素自身浮動(dòng)，兩者并不矛盾，因此而設(shè)置浮動(dòng)是讓元素自身浮動(dòng)，兩者并不矛盾，因此可同時(shí)設(shè)置元素清除浮動(dòng)和浮動(dòng)可同時(shí)設(shè)置元素清除浮動(dòng)和浮動(dòng) 4.7.3 浮動(dòng)的瀏覽器解釋問題浮動(dòng)的瀏覽器解釋問題v1. 元素浮動(dòng)但是其父元素不浮動(dòng)元素浮動(dòng)但是其父元素不浮動(dòng)v當(dāng)設(shè)置了父元素的寬度或高度后，當(dāng)設(shè)置了父元素的寬度或高度后，IE （非標(biāo)準(zhǔn)瀏覽（非標(biāo)準(zhǔn)瀏覽器）中的浮動(dòng)元素將占據(jù)外圍容器空間，器）中的浮動(dòng)元素將占據(jù)外圍容器空間，F(xiàn)irefox依然依然不占據(jù)不占據(jù) 3. 元素浮動(dòng)但是其后面相鄰元素不浮動(dòng)元素浮動(dòng)