網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（HTML5+CSS3+JavaScript）（微課版）（第2版） 課件 案例7知識(shí)點(diǎn)01：收納神器盒子模型

我們畢業(yè)啦其實(shí)是答辯的標(biāo)題地方收納神器——盒子模型網(wǎng)站開(kāi)發(fā)時(shí)，一個(gè)網(wǎng)頁(yè)上有若干板塊，每個(gè)板塊都是放在盒子中來(lái)顯示的，這里的盒子就是CSS中的盒子模型。盒子模型盒子模型就是把HTML頁(yè)面中的元素看作矩形的盒子，也就是盛裝內(nèi)容的容器。每個(gè)盒子都由元素的內(nèi)容（content）、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。盒子模型“div”是英文“division”的縮寫，意為“分割、區(qū)域”?！?lt;div>”標(biāo)記就是一個(gè)區(qū)塊容器標(biāo)記，簡(jiǎn)稱塊標(biāo)記，塊通稱為盒子。盒子模型<div>標(biāo)記可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁(yè)元素。<div>標(biāo)記中還可以包含多層<div>標(biāo)記。實(shí)際上DIV+CSS布局網(wǎng)頁(yè)就是將網(wǎng)頁(yè)內(nèi)容放入若干<div>標(biāo)記中，并使用CSS設(shè)置這些塊的屬性。說(shuō)明：盒子的概念是非常容易理解的。但是如果需要精確地排版，有的時(shí)候1px都不能差，這就需要非常精確地理解其中的計(jì)算方法。盒子模型例

7-1example01.html說(shuō)明：一個(gè)盒子實(shí)際占有的寬度（或高度）是由“內(nèi)容+2×內(nèi)邊距+2×邊框+2×外邊距”組成的。因此，盒子的實(shí)際寬度和高度均是310px。盒子模型（1）并不是只有用<div>定義的塊才是盒子，事實(shí)上大部分網(wǎng)頁(yè)元素本質(zhì)上都是以盒子的形式存在的。例如，body、p、h1～h6、ul、li等元素都是盒子，這些元素都有默認(rèn)的盒子屬性值。注意（2）給盒子添加背景顏色或背景圖像時(shí)，該元素的背景顏色或背景圖像也將出現(xiàn)在內(nèi)邊距中。（3）雖然每個(gè)盒子模型都擁有內(nèi)邊距、邊框、外邊距、寬度和高度這些基本屬性，但是并不要求必須對(duì)每個(gè)元素都定義這些屬性。（4）<div>標(biāo)記定義的盒子默認(rèn)的寬度是瀏覽器的寬度，默認(rèn)的高度由盒子中的內(nèi)容決定，默認(rèn)的邊框、內(nèi)邊距、外邊距都為0。但網(wǎng)頁(yè)中的元素body、p、h1～h6、ul、li等都有默認(rèn)的外邊距和內(nèi)邊距，設(shè)計(jì)網(wǎng)頁(yè)時(shí)，一般要將這些元素的外邊距和內(nèi)邊距都先設(shè)為0，需要時(shí)再設(shè)置為非零的值。小結(jié)本次課講解了盒子模型的概念、盒子相關(guān)的幾個(gè)屬性以及如何精確地計(jì)