《CSS盒子模型》PPT課件.ppt

1、第十講,CSS盒子模型 在網(wǎng)頁中的運用,回顧,CSS中背景屬性的縮寫格式如何編寫？ CSS中如何實現(xiàn)圖片代替文本？ 滑動門技術(shù)一般運用在什么地方？如何實現(xiàn),初步了解盒子模型的定義 掌握盒子模型的特性 掌握盒子的定位 了解盒子的margin疊加問題 掌握盒子的浮動 使用盒子模型進行頁面布局,本講目標,新知識導入：CSS的盒子模型,盒子模型是CSS的基石之一，它指定元素如何顯示以及（在某種程度上）如何相互交互。 頁面上的每個元素都被瀏覽器看成是一個矩形的盒子，這個盒子由元素的內(nèi)容、填充、邊框和邊界間距組成。 網(wǎng)頁就是由許多個盒子通過不同的排列方式（上下排列，并列排列，嵌套排列）堆積而成,CSS的盒

2、子模型,CSS的盒子模型,每個HTML元素都可以看作是一個裝了東西的盒子 盒子里面的內(nèi)容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其它盒子之間，還有邊界(magin),如圖所示 默認情況下盒子的邊框是無，背景色是透明，所以我們在默認情況下看不到盒子,元素盒子大小的計算,一個元素實際寬度=左邊界左邊框左填充內(nèi)容寬度右填充右邊框右邊界,IE quirk模式下盒子的寬度,當將文檔聲明DOCTYPE刪除后，IE 6對網(wǎng)頁的解釋會進入quirk（怪異）模式，此時盒子的寬度等于左邊界寬度右邊界 因此當使用了盒子屬性后切忌刪除DOCTYPE,CSS盒子模型

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

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

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

6、adding)瀏覽器默認值不為0，例如：body，p，ul，li，form標記等，因此我們有時有必要先設置它們的這些屬性為0。 Input元素的邊框?qū)傩阅J不為0，我們可以設置為0達到美化表單中輸入框和按鈕的目的,盒子模型的應用,1. 美化表單 網(wǎng)頁中的表單控件在默認情況下背景都是灰色的，文本框邊框是粗線條帶立體感的，不夠美觀。下列代碼通過CSS改變表單的邊框樣式、顏色和背景顏色讓文本框，按鈕等變得漂亮些,盒子的定位,盒子的三種定位形式,在標準流下的定位 在浮動屬性下的定位 在定位屬性下的定位 除非設置浮動屬性或定位屬性，否則所有盒子都是在標準流中定位。顧名思義，標準流中元素盒子的位置由元素在

7、HTML中的位置決定,標準流,HTML元素在標準狀況下的定位方式 行內(nèi)元素在同一行內(nèi)橫向排列 塊級元素占滿整個一行，在頁面中豎向排列 元素不會移動到其它地方去，對于嵌套的元素盒子也是嵌套的關(guān)系,標準流下的盒子排列分析,* border: 2px dashed #FF0066; padding: 10px; margin: 2px; 網(wǎng)頁的banner（塊級元素） 行內(nèi)元素1行內(nèi)2 行內(nèi)3 這是無名塊這是盒子中的盒子,行內(nèi)元素的盒子,行內(nèi)元素的盒子永遠只能在瀏覽器中得到一行高度的空間（行高由line-height屬性決定，如果沒設置該屬性，則是內(nèi)容的默認高度），如果給它設置上下border，ma

8、rgin，padding等值，導致其盒子的高度超過行高，那么它的盒子上下部分將和其他元素的盒子重疊。 因此，不推薦對行內(nèi)元素直接設置盒子屬性，一般先設置行內(nèi)元素以塊級元素顯示，再設置它的盒子屬性,改變行內(nèi)元素的高度,如圖所示，當增加行內(nèi)元素的邊界和填充時，行內(nèi)元素a占據(jù)瀏覽器的高度并沒有增加，下面這個div塊仍然在原來的位置，導致行內(nèi)元素盒子的上下部分重疊，而左右部分不會受影響,display屬性,通過display屬性可控制元素是以行內(nèi)元素顯示還是以塊級元素顯示，或不顯示 display:block | inline | none | list-item,block元素,block元素的特點

9、是：總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非用width設定一個寬度, , , , 和 是塊元素的例子,inline元素,inline元素的特點是： 和其他元素都在一行上 高，行高及頂和底邊距不可改變； 寬度就是它的文字或圖片的寬度，不可改變。, , , , , 和是inline元素的例子,列表項元素display: list-item,在html中只有l(wèi)i元素默認是此類型，將元素設置為列表項元素后將按列表元素顯示，再通過設置列表選項可使元素的左邊出現(xiàn)小黑點,隱藏元素display: none,當某個元素被設置成了隱藏元素之后，瀏覽器會完全忽略掉這

10、個元素，該元素將不會被顯示，也不會占據(jù)文檔中的位置。像title元素默認就是此類型。 比較visibility: hidden; 制作下拉菜單、tab面板等有時就需要用display: none把菜單或面板隱藏起來,需要使用display屬性切換的情況,讓一個inline元素從新行開始； 讓塊元素和其他元素保持在一行上； 控制inline元素的寬度; 控制inline元素的高度（對導航條特別有用）； 無須設定寬度即可為一個塊元素設定與文字同寬的背景色,標準流下定位的應用制作豎直導航菜單,nav a font-size: 14px; color: #333333; text-decoration

11、: none; background-color: #CCCCCC; display: block; width:140px; padding: 6px 10px 4px; border: 1px solid #000000; margin: 2px; #nav a:hover color: #FFFFFF; background-color: #666666;,盒子的margin疊加問題,盒子的margin在標準流中的計算,實驗1：行內(nèi)元素之間的水平margin span.left margin-right:30px; background-color:#a9d6ff; span.right margin-left:40px; background-color:#eeb0b0;,行內(nèi)元素之間的水平margin,結(jié)論：行內(nèi)元素之間的水平marg