首頁(yè)技術(shù)文章正文

盒子模型的組成部分有哪些?

更新時(shí)間:2021-07-28 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

在瀏覽網(wǎng)站時(shí),我們會(huì)發(fā)現(xiàn)頁(yè)面的內(nèi)容都是按照區(qū)域劃分的。在頁(yè)面中,每一塊區(qū)域分別承載不同的內(nèi)容,使得網(wǎng)頁(yè)的內(nèi)容雖然零散,但是在版式排列上依然清晰有條理。例如圖1所示的設(shè)計(jì)類網(wǎng)站。
盒子模型

圖1 設(shè)計(jì)類網(wǎng)站

在圖1所示的網(wǎng)站頁(yè)面中,這些承載內(nèi)容的區(qū)域被稱為盒子模型。盒子模型就是把HTML頁(yè)面中的元素看作是一個(gè)方形的盒子,也就是一個(gè)盛裝內(nèi)容的容器。每個(gè)方形都由元素的內(nèi)容、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)組成。

為了更形象地認(rèn)識(shí)CSS盒子模型,首先我們從生活中常見(jiàn)的手機(jī)盒子的構(gòu)成說(shuō)起。一個(gè)完整的手機(jī)盒子通常包含手機(jī)、填充泡沫和盛裝手機(jī)的紙盒。如果把手機(jī)想象成HTML元素,那么手機(jī)盒子就是一個(gè)CSS盒子模型,其中手機(jī)為CSS盒子模型的內(nèi)容,填充泡沫的厚度為CSS盒子模型的內(nèi)邊距,紙盒的厚度為CSS盒子模型的邊框,如圖2所示。當(dāng)多個(gè)手機(jī)盒子放在一起時(shí),它們之間的距離就是CSS盒子模型的外邊距。

盒子模型

圖2 手機(jī)盒子的構(gòu)成

網(wǎng)頁(yè)中所有的元素和對(duì)象都是由圖2所示的基本結(jié)構(gòu)組成,并呈現(xiàn)出矩形的盒子效果。在瀏覽器看來(lái),網(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)邊距和外邊距之間。

需要注意的是,雖然盒子模型擁有內(nèi)邊距、邊框、外邊距、寬和高這些基本屬性,但是并不要求每個(gè)元素都必須定義這些屬性。



猜你喜歡:

CSS3盒子模型邊框怎樣實(shí)現(xiàn)圓角效果?

前端】盒子模型的邊框樣式屬性和應(yīng)用技巧講解

怎樣將.scss文件編譯成為.css文件?

黑馬程序員前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!