第4章3CSS盒子模型

1、CSS的盒子模型CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互頁面上的每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內容、填充、邊框和邊界組成。網頁就是由許多個盒子通過不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成。 CSS的盒子模型CSS的盒子模型每個HTML元素都可以看作是一個裝了東西的盒子盒子里面的內容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其它盒子之間，還有邊界(magin)默認情況下盒子的邊框是無，背景色是透明，所以我們在默認情況下看不到盒子contentpaddi

2、ng-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的計算一個元素實際寬度=左邊界左邊框左填充內容寬度右填充右邊框右邊界IE quirk模式下盒子的寬度當將文檔聲明DOCTYPE刪除后，IE 6對網頁的解釋會進入quirk（怪異）模式，此時盒子的寬度等于左邊界寬度右邊界因此當使用了盒子屬性后切忌刪除DOCTYPECSS盒子模型計算題如果盒子里

3、面嵌套有盒子，且兩個盒子都有邊框，那么兩個盒子邊框之間的距離等于外面盒子的填充值里面盒子的邊界值邊框border屬性盒子模型的margin和padding屬性比較簡單，只能設置寬度值，最多分別對上、右、下、左設置寬度值。而邊框border則可以設置寬度、顏色和樣式。 分別是border-width（寬度）、border-color（顏色）和border-style（樣式）其中border-style屬性可以將邊框設置為實線（solid）、虛線（dashed）、點劃線（dotted）、雙線（double）等效果 填充padding屬性填充padding屬性，也稱為盒子的內邊距。就是盒子邊框到內容

4、之間的距離，和表格的填充屬性（cellpadding）比較相似。如果填充屬性為0，則盒子的邊框會緊挨著內容，這樣通常不美觀。當對盒子設置了背景顏色或背景圖像后，那么背景會覆蓋padding和內容組成的范圍，并且默認情況下背景圖像是以padding的左上角為基準點在盒子中平鋪的 盒子模型的特性邊界值margin可為負，填充padding不可為負邊框border默認值為0，即不顯示行內元素，如a，定義上下邊界不影響行高對盒子模型的思考邊框是實的，我們可以看到實實在在的邊框，而填充和邊界都是虛的，我們只能看到他們對元素的影響盒子模型中只能設置兩類顏色，即邊框顏色和背景顏色盒子模型可設置三類距離，即邊

5、界距離margin，填充距離padding和邊框值border屬性值的簡寫形式方法是按照規(guī)定的順序，給出2個、3個或者4個屬性值，它們的含義將有所區(qū)別，具體含義如下：如果給出2個屬性值，前者表示上下邊框的屬性，后者表示左右邊框的屬性；如果給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，后者表示下邊框的屬性；如果給出4個屬性值，依次表示上、右、下、左邊框的屬性，即順時針排序。各種元素盒子屬性的默認值大部分html元素的盒子屬性(margin, padding)默認值都為0；有少數html元素的(margin, padding)瀏覽器默認值不為0，例如：body，p，ul，li

6、，form標記等，因此我們有時有必要先設置它們的這些屬性為0。Input元素的邊框屬性默認不為0，我們可以設置為0達到美化表單中輸入框和按鈕的目的。盒子的定位盒子的三種定位形式在標準流下的定位在浮動屬性下的定位在定位屬性下的定位除非設置浮動屬性或定位屬性，否則所有盒子都是在標準流中定位。顧名思義，標準流中元素盒子的位置由元素在HTML中的位置決定。標準流HTML元素在標準狀況下的定位方式行內元素在同一行內橫向排列塊級元素占滿整個一行，在頁面中豎向排列元素不會移動到其它地方去，對于嵌套的元素盒子也是嵌套的關系背景的控制 CSS的背景屬性背景（background）是網頁中常用的一種表現方法，無論

7、是單純的背景顏色還是背景圖片，都能為網頁帶來豐富的視覺效果，HTML的很多元素都具有bgcolor和backgroud屬性，可以設置背景顏色和背景圖片，如（table、td等），但形式比較單一，對背景圖片的設定，只支持在X軸和Y軸都平鋪的方式，因此，如果同時設置了背景顏色和背景圖片，那么背景顏色將被背景圖片擋住，以背景圖片來顯示。而CSS對元素的背景設置，則提供了更多的途徑，如背景圖片既可以平鋪也可以不平鋪，還可以在X軸平鋪或在Y軸平鋪，當背景圖片不平鋪時，并不會完全擋住背景顏色，因此可以綜合設置背景顏色和背景圖片達到希望的效果。CSS的背景屬性是backgroud或以backgroud開頭

8、CSS的背景屬性屬性屬性描述描述可用值可用值background設置背景的所有控制選項，是設置背景的所有控制選項，是其他所有背景屬性的縮寫其他所有背景屬性的縮寫其他背景屬性的值的集合其他背景屬性的值的集合background-color設置背景顏色設置背景顏色rgb顏色顏色命名顏色命名顏色16進制顏色進制顏色background-image設置背景圖片設置背景圖片urlbackground-repeat設置背景圖片的平鋪設置背景圖片的平鋪方式方式repeat（完全平鋪）（完全平鋪）repeat-x（橫向平鋪）（橫向平鋪）repeat-y（縱向平鋪）（縱向平鋪）no-repeat（不平鋪）（不平

9、鋪）background-attachment設置背景圖片固定還設置背景圖片固定還是隨內容滾動是隨內容滾動scroll（默認值）（默認值）fixedbackground-position設置背景圖片顯示的設置背景圖片顯示的起始位置起始位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各個背景屬性的默認值background-color: transparent 透明模式background-image: none background-repeat: repeat平鋪 background-attachment: scroll bac

10、kground-position: 0% 0%DW中的背景設置面板background-color:#0099ccbackground-image: url(img/bottom.gif)background-repeat: no-repeatbackground-position: right bottombackground-attachment: no-repeat背景的運用技巧背景的運用技巧同時運用背景顏色和背景圖片控制背景在盒子中的位置及是否平鋪多個元素背景的疊加 滑動門技術 背景位置的控制實現圖片的翻轉圓角的設計方法同時運用背景顏色和背景圖片目前網頁中流行采用一種漸變背景，即網頁的

11、背景從上至下由一種深顏色過渡到一種淺顏色，由于網頁的長度通常是不好估計的，所以無法用一幅背景圖片來做這種漸變背景，只能在網頁的上部用漸變的圖片做背景，下部使用用一種和圖片下部顏色相同的顏色做背景色通過在CSS中設置body標記的背景顏色和背景圖片，并把背景圖片設置為橫向平鋪就可以實現漸變背景了。bodybackground:#666666 url(xxwlzx/body_bg.gif) repeat-x; 控制背景在盒子中的位置及是否平鋪 在html中，背景圖像只能平鋪，而在CSS中，背景圖像能做到精確定位，允許不平鋪，效果就像普通的圖像元素一樣。因此有人建議所有的網頁圖像都作為元素的CSS背

12、景引入。例如下面的網頁的背景就是用讓背景圖片不平鋪并且定位于右下角實現的。body background: #F7F2DF url(cha.jpg) no-repeat right bottom ;多個元素背景的疊加 背景圖片的疊加是很重要的CSS技術，當兩個元素是嵌套關系時，那么里面元素的盒子背景的不透明部分將覆蓋在外面元素盒子背景之上，利用這一點，再結合對背景圖片位置的控制，可以得到滑動門技術。下面以4圖像可變寬度圓角欄目框的制作來介紹多個元素背景疊加的技巧 圓角的設計固定寬圓角可變寬圓角盒子的浮動盒子的浮動 在標準流中，塊級元素的盒子都是上下排列，行內元素的盒子都是左右排列，如果僅僅按照

13、標準流的方式進行排列，就只有這幾種可能性，限制太大。CSS的制訂者也想到了這樣排列限制的問題，因此又給出了浮動和定位方式進行盒子的排列，從而使排版的靈活性大大提高。例如：有時希望相鄰塊級元素的盒子左右排列（所有盒子浮動）或者希望一個盒子被另一個盒子中的內容所環(huán)繞（一個盒子浮動）做出圖文混排的效果，這時最簡單的辦法就是運用浮動（float）屬性使盒子在浮動方式下定位。 盒子的浮動 在標準流中，一個塊級元素在水平方向會自動伸展，在它的父元素中占滿整個一行；而在豎直方向和其他元素依次排列，不能并排，使用“浮動”方式后，這種排列方式就會發(fā)生改變。CSS中有一個float屬性，默認值為none，也就是標準流通常的情況，如果將float屬性的值設為left或right，元素就會向其父元素的左側或右側靠緊，同時盒子的寬度不再伸展，而是收縮，在沒設置寬度時，會根據盒子里面的內容來確定寬度。盒子的浮動 人有了知識，就會具備各種分析能力，人有了知識，就會具備各種分析能力，明辨是非的能力。明辨是非的能力。所以我們要勤懇讀書，廣泛閱讀，所以我們要勤懇讀書，廣泛閱讀，古人說古人說“書中自有黃金屋。書中自有黃金屋?！蓖ㄟ^閱讀科技書籍，