第4章3CSS盒子模型

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

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

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

4、等于（怪異）模式，此時盒子的寬度等于左左邊界寬度右邊界邊界寬度右邊界v因此當使用了盒子屬性后切忌刪除因此當使用了盒子屬性后切忌刪除DOCTYPECSS盒子模型計算題盒子模型計算題v如果盒子里面嵌套有盒子，且兩個盒子都有邊框，那如果盒子里面嵌套有盒子，且兩個盒子都有邊框，那么兩個盒子邊框之間的距離等于外面盒子的填充值么兩個盒子邊框之間的距離等于外面盒子的填充值里面盒子的邊界值里面盒子的邊界值#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屬性比較簡單，只能設屬性比較簡單，只能設置寬度值，最多分別對上、右、下、左設置寬度值。置寬度值，最多分別對上、右、下、左設置寬度值。而邊框而邊框border則可以設置寬度、顏色和樣式。則可以設置寬度、顏色和樣式。 v分別是分別是border-width（寬度）、（寬度）、border-color（顏色）（顏色）和和border-style（樣

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

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

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

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

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

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

12、1像素邊框的表格，然后用像素邊框的表格，然后用css為為table元素加一個元素加一個1象素寬的象素寬的borderv制作制作1象素虛線邊框象素虛線邊框v首先將表格的邊框和間距設為首先將表格的邊框和間距設為0，然后設置，然后設置table的的CSS上邊框和左邊框為上邊框和左邊框為1象素虛線，再設置象素虛線，再設置td的的css下下邊框和右邊框為邊框和右邊框為1象素虛線象素虛線盒子的定位盒子的定位盒子的三種定位形式盒子的三種定位形式v在標準流下的定位在標準流下的定位v在浮動屬性下的定位在浮動屬性下的定位v在定位屬性下的定位在定位屬性下的定位v除非設置浮動屬性或定位屬性，否則所有盒子都是除非設置浮

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

14、066;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)元素的盒子v行內(nèi)元素的盒子永遠只能在瀏覽器中得到行內(nèi)元素的盒子永遠只能在瀏覽器中得到一行高度一行高度的的空間（行高由空間（行高由line-height屬性決定，如果沒設置該屬屬性決定，如果沒設置該屬性，則是內(nèi)容的默認高度），如果給它設置上下性，則是內(nèi)容的默認高度），如果給它設置上下border，margin，padding等值，導致其盒子的高度等值，導致其盒子的高度超過行高，那么它

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

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

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

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

19、切換的情況屬性切換的情況1.讓一個讓一個inline元素從新行開始；元素從新行開始；2.讓塊元素和其他元素保持在一行上；讓塊元素和其他元素保持在一行上；3.控制控制inline元素的寬度元素的寬度;4.控制控制inline元素的高度（對導航條特別有用）；元素的高度（對導航條特別有用）；5. 無須設定寬度即可為一個塊元素設定與文字同寬的無須設定寬度即可為一個塊元素設定與文字同寬的背景色背景色 標準流下定位的應用制作豎直導航菜單標準流下定位的應用制作豎直導航菜單#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在標準流中的計算在標準流中的計算v 實驗實驗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不會疊加不會疊加span 2span 1margin-rightmargin-left 實驗2塊級元素之間的豎直margin 塊元素1塊元素2塊元素塊元素1塊元素塊元素2塊元素塊元素1塊元素塊元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px塊級元素之間的上下塊級元素之間的上下margin空白邊疊加空白邊疊加v 當一個元素包含在另一個元素中時，若

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

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

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

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

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

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

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

29、明模式透明模式vbackground-image: none vbackground-repeat: repeat平鋪平鋪 vbackground-attachment: scroll vbackground-position: 0% 0%background屬性的縮寫屬性的縮寫vbackground屬性是所有背景屬性的縮寫形式，就像屬性是所有背景屬性的縮寫形式，就像font屬性一樣，其縮寫順序為：屬性一樣，其縮寫順序為：vbackground: background-color | background-image | background-repeat | background-attac

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

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

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

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

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

35、通過調(diào)整左，這樣還可通過調(diào)整左padding的值實的值實現(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àn)在圖片符號出現(xiàn)在li元素中的任意位置上。元素中的任意位置上。 多個元素背景的疊加多個元素背景的疊加 v背景圖片的疊加是很重要的背

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

37、角矩形的標題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;最后再設置背景色最后再設置背景色v由于幾層背景的疊加，背景色只能放在最底層的盒子由于幾層背景的疊加，背景色只能放在最底層的盒子上，也就是對最外層的元素設置背景色，這樣背景色上，也就是對最外層的元素設置背景色，這樣背景色就不會把背景圖片給覆蓋了。與此相反，為了讓內(nèi)容就不會把背景圖片給覆蓋了。與此相反，為了讓內(nèi)容能放在距邊框有一定邊距的區(qū)域，必須設置能放在距邊框有一定邊距的區(qū)域，必須設置padding值，而且值，而且padding值只能設置在最里層的盒子上。值只能設置在最里層的盒子上。v但這個圓角框沒有邊框，要制作帶有邊框的可變寬度但這個圓角框沒有邊框，要制作帶有邊框的可變寬

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

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

42、，能使導航條都能顯示，同時，改變文字的多少，能使導航條自動伸展，而圓角部分位于自動伸展，而圓角部分位于padding區(qū)域，不會影區(qū)域，不會影響圓角響圓角滑動門導航條代碼滑動門導航條代碼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;首首 頁頁 中心簡介中心簡介 政策法規(guī)政策法規(guī) 常用下載常用下載 為您服務為您服務 技術支持和服務技術支持和服務背景圖案的翻轉控制背景的顯示區(qū)域背景圖案的翻轉控制背景的顯示區(qū)域 v通過背景定位技術可使背景圖片出現(xiàn)在盒子的任意位通過背景定位技術可使背景圖片出現(xiàn)在盒子的任意位置上，如果盒子沒有背景那么大，那么只能顯示背景置上，如果盒子沒有背景那么大，那么只能顯示背景圖的一部分，利用這一點，我們可

44、以將多個背景圖片圖的一部分，利用這一點，我們可以將多個背景圖片放置在一個大的背景圖里，讓每個元素只顯示這張大放置在一個大的背景圖里，讓每個元素只顯示這張大背景圖的一部分，例如制作導航條時，可以讓鏈接狀背景圖的一部分，例如制作導航條時，可以讓鏈接狀態(tài)顯示背景圖的上一部分，鼠標滑過時顯示背景圖的態(tài)顯示背景圖的上一部分，鼠標滑過時顯示背景圖的下一部分，這就是背景的翻轉，使我們只用一幅圖片下一部分，這就是背景的翻轉，使我們只用一幅圖片就能實現(xiàn)背景圖的切換。就能實現(xiàn)背景圖的切換。通過背景圖片位置控制實現(xiàn)圖片翻轉通過背景圖片位置控制實現(xià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; 將滑動門技術和背景圖片翻轉結合的例子將滑動門技術和背景圖片翻轉結合的例子a:hover ba

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

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

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

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

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

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

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

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

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

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

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

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

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

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