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

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

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

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

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

5、也可以用padding一次性設(shè)置所有的對(duì)象間隙，格式也和margin相似。5.2 邊框、外邊距與內(nèi)邊距5.2.3 內(nèi)邊距【演練5-4】使用內(nèi)邊距（padding）屬性設(shè)置內(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 塊級(jí)元素與行級(jí)元素寬度和高度的區(qū)別塊級(jí)元素與行級(jí)元素【演練5-5】塊級(jí)元素與行級(jí)元素寬度和高度的區(qū)別，本例文件5-5.html在瀏覽器中的顯示效果如圖5-11所示。5.5 盒子的margin疊加問(wèn)題5.5.1 水平margin疊加這里來(lái)看兩個(gè)行級(jí)元素并排的情況，如圖5-13所示。5.5 盒子的margin疊加問(wèn)題5.5

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

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

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

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

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

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