網(wǎng)頁(yè)設(shè)計(jì)與制作（活頁(yè)式） 課件 情景8-6 盒子模型基本概念

網(wǎng)頁(yè)設(shè)計(jì)與制作盒子模型基本概念授課教師：吳紀(jì)磊HTMLcsscssJavaScript目錄CONTENTS12學(xué)習(xí)目標(biāo)知識(shí)講解學(xué)習(xí)目標(biāo)01學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)01認(rèn)識(shí)CSS盒子模型學(xué)習(xí)目標(biāo)02了解盒子模型基本概念02知識(shí)點(diǎn)講解知識(shí)點(diǎn)講解思考

01什么是盒子模型？知識(shí)點(diǎn)講解聯(lián)想一下生活中常見的盒子模型？它

們

的

共

同

特

點(diǎn)知識(shí)點(diǎn)講解圖1.1盒子模型1、盒子模型

盒子模型是CSS布局頁(yè)面元素所使用的一種思維模型。

在盒子模型中，所有頁(yè)面中的元素被看做是一個(gè)個(gè)盒子，它們占據(jù)一定的頁(yè)面空間，在其中放著特定的內(nèi)容。

一個(gè)盒子在頁(yè)面上占據(jù)的實(shí)際空間是“內(nèi)容+內(nèi)邊距+外邊距+邊框”組成的空間，可通過(guò)設(shè)定這些組成部分的樣式來(lái)實(shí)現(xiàn)各種各樣的排版效果。盒

子模

型content(內(nèi)容)border(邊框)padding(內(nèi)邊距)margin(外邊距)1、盒子模型Margin(外邊距)清除邊框外的區(qū)域，外邊距是透明的。Border(邊框)圍繞在內(nèi)邊距和內(nèi)容外的邊框。Padding(內(nèi)邊距)清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。Content(內(nèi)容)盒子的內(nèi)容，顯示文本和圖像。所有HTML元素可以看作盒子，在CSS中，"boxmodel"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距、邊框、填充和實(shí)際內(nèi)容。盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。02練一練【練一練】運(yùn)行效果盒子模型演示案例代碼如下：03小結(jié)小結(jié)本節(jié)介紹了盒子模型的基本概念，了解網(wǎng)頁(yè)就是多個(gè)盒子嵌套排列的結(jié)果；內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍，當(dāng)給元素添加背景色或背景圖像時(shí)，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中；外邊距是該元素與相鄰元素之間的距離；如果給元素定義邊框?qū)傩裕吙驅(qū)⒊霈F(xiàn)在內(nèi)邊距和外邊距之間。同時(shí)需要注意的是雖然盒子模型擁有內(nèi)邊距、邊框、外邊距、寬和高這些基本屬性，但是并不要求每個(gè)元素都