網(wǎng)頁設計與制作教程第5章--CSS盒模型課件

1、網(wǎng)頁設計與制作教程（HTML+CSS+JavaScript）第2版機械工業(yè)出版社第5章 CSS盒模型5.1 盒模型簡介盒模型簡介盒模型將頁面中的每個元素看做一個矩形框，這個框由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成，如圖5-1所示。對象的尺寸與邊框等樣式表屬性的關(guān)系，如圖5-2所示。5.2 邊框、外邊距與內(nèi)邊距5.2.1 邊框1所有邊框?qū)挾龋╞order-width）語法：border-width : medium | thin | thick | length2上邊框?qū)挾龋╞order-top）語法：border-top :

2、border-width | border-style | border-color3右邊框?qū)挾龋╞order-right）語法：border-right : border-width | border-style | border-color4下邊框?qū)挾龋╞order-bottom）語法：border-bottom : border-width | border-style | border-color5左邊框?qū)挾龋╞order-left）語法：border-left : border-width | border-style | border-color5.2 邊框、外邊距與內(nèi)邊距5.2.

3、1 邊框6邊框顏色（border-color）語法：border-color : color7邊框樣式（border-style）語法：border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset5.2 邊框、外邊距與內(nèi)邊距5.2.2 外邊距1上外邊距（margin-top）語法：margin-top : length | auto2右外邊距（margin-right）語法：margin-right : length | auto3下外邊距（margin-bot

4、tom）語法：margin-bottom : length | auto4左外邊距（margin-left）語法：margin-left : length | auto5外邊距（margin）語法：margin : length | auto5.2 邊框、外邊距與內(nèi)邊距5.2.3 內(nèi)邊距內(nèi)邊距用于控制內(nèi)容與邊框之間的距離，padding屬性定義元素內(nèi)容與元素邊框之間的空白區(qū)域。內(nèi)邊距包括了4項屬性：padding-top（上內(nèi)邊距）、padding-right（右內(nèi)邊距）、padding-bottom（下內(nèi)邊距）、padding-left（左內(nèi)邊距），內(nèi)邊距屬性不允許負值。與外邊距類似，內(nèi)邊距

5、也可以用padding一次性設置所有的對象間隙，格式也和margin相似。5.2 邊框、外邊距與內(nèi)邊距5.2.3 內(nèi)邊距【演練5-4】使用內(nèi)邊距（padding）屬性設置內(nèi)容與邊框之間的距離，盒模型的布局如圖5-9所示，本例文件5-4.html在瀏覽器中的顯示效果如圖5-10所示。5.3 盒模型的寬度與高度盒模型的寬度與高度1盒模型的寬度盒模型的寬度=左外邊距（margin-left）+左邊框（border-left）+左內(nèi)邊距（padding-left）+內(nèi)容寬度（width）+右內(nèi)邊距（padding-right）+右邊框（border-right）+右外邊距（margin-right）2

6、盒模型的高度盒模型的高度=上外邊距（margin-top）+上邊框（border-top）+上內(nèi)邊距（padding-top）+內(nèi)容高度（height）+下內(nèi)邊距（padding-bottom）+下邊框（border-bottom）+下外邊距（margin-bottom）5.4 塊級元素與行級元素寬度和高度的區(qū)別塊級元素與行級元素【演練5-5】塊級元素與行級元素寬度和高度的區(qū)別，本例文件5-5.html在瀏覽器中的顯示效果如圖5-11所示。5.5 盒子的margin疊加問題5.5.1 水平margin疊加這里來看兩個行級元素并排的情況，如圖5-13所示。5.5 盒子的margin疊加問題5.5

7、.2 垂直margin疊加1兩個元素垂直相遇時疊加當兩個元素垂直相遇時，如圖5-15所示。2兩個元素包含時疊加假設兩個元素沒有內(nèi)邊距和邊框，且一個元素包含另一個元素，它們的上外邊距或下外邊距也會發(fā)生疊加合并，如圖5-16所示。5.6 盒模型綜合案例制作光影世界高端外景局部頁面光影世界高端外景局部頁面【演練5-8】使用盒模型技術(shù)制作光影世界高端外景局部頁面，頁面的布局效果如圖5-19所示，本例文件5-8.html在瀏覽器中的顯示效果如圖5-20所示。5.6 盒模型綜合案例制作光影世界高端外景局部頁面光影世界高端外景局部頁面1前期準備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和css，

8、分別用來存放圖像素材和外部樣式表文件。（2）頁面素材將本頁面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾css下新建一個名為style.css的樣式表文件。2制作頁面5.7 盒子的定位5.7.1 定位屬性1定位方式（position）position屬性可以選擇4中不同類型的定位方式，語法如下：position : static | relative | absolute | fixed2左、右、上、下位置語法：left:auto | length right:auto | lengthtop:auto | lengthbottom:auto | length5.7

9、盒子的定位5.7.1 定位屬性3寬度（width）語法：width:auto | length4高度（height）語法：height:auto | length5最小高度（min-height）語法：min-height:auto | length6可見性（visibility）語法：visibility:inherit | visible | collapse | hidden7層疊順序z-index語法：z-index : auto | number5.7 盒子的定位5.7.1 定位屬性3寬度（width）語法：width:auto | length4高度（height）語法：heigh

10、t:auto | length5最小高度（min-height）語法：min-height:auto | length6可見性（visibility）語法：visibility:inherit | visible | collapse | hidden5.7 盒子的定位5.7.2 定位方式1靜態(tài)定位靜態(tài)定位是position屬性的默認值，盒子按照標準流（包括浮動方式）進行布局，即該元素出現(xiàn)在文檔的常規(guī)位置，不會重新定位?！狙菥?-9】靜態(tài)定位示例。本例文件5-9.html在瀏覽器中的顯示效果如圖5-21所示。5.7 盒子的定位5.7.2 定位方式2相對定位使用相對定位的盒子，會相對于自身原本的

11、位置，通過偏移指定的距離，到達新的位置?！狙菥?-10】相對定位示例。本例文件5-10.html在瀏覽器中的顯示效果如圖5-22所示。5.7 盒子的定位5.7.2 定位方式3絕對定位使用絕對定位的盒子以它的“最近”的一個“已經(jīng)定位”的“祖先元素”為基準進行偏移。如果沒有已經(jīng)定位的祖先元素，就以瀏覽器窗口為基準進行定位?！狙菥?-11】絕對定位示例。5.7 盒子的定位5.7.2 定位方式4固定定位固定定位（position:fixed;）是相對于視窗固定的，就算頁面文檔發(fā)生了滾動，它也會一直呆在相同的地方?！狙菥?-12】固定定位示例。5.8 浮動與清除浮動5.8.1 浮動浮動元素可以向左或向右

12、移動，直到它的外邊距邊緣碰到包含塊內(nèi)邊距邊緣或另一個浮動元素的外邊距邊緣為止。語法：float : none | left |right【演練5-13】向右浮動的元素。5.8 浮動與清除浮動5.8.1 浮動【演練5-14】向左浮動的元素。使用上面的演練5-13繼續(xù)討論，只將“盒子1”向左浮動的頁面布局如圖5-29（a）所示，所有元素向左浮動后的結(jié)果如圖5-29（b）所示。5.8 浮動與清除浮動5.8.1 浮動【演練5-15】父容器空間不夠時的元素浮動。5.8 浮動與清除浮動5.8.2 清除浮動為了防止浮動溢出現(xiàn)象的出現(xiàn)而進行的CSS處理，就叫清除浮動，清除浮動即清除掉元素float屬性。語法：clear : none | left |right | both【演練5-16】清除浮動示例。5.9 實訓家具商城