首頁技術(shù)文章正文

如何理解盒子模型？它有哪些部分組成？

更新時間:2021年07月28日15時32分來源:傳智教育瀏覽次數(shù):

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

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

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

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

盒子模型

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

網(wǎng)頁中所有的元素和對象都是由圖2所示的基本結(jié)構(gòu)組成，并呈現(xiàn)出矩形的盒子效果。在瀏覽器看來，網(wǎng)頁就是多個盒子嵌套排列的結(jié)果。其中，內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍，當(dāng)給元素添加背景色或背景圖像時，該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中，外邊距是該元素與相鄰元素之間的距離，如果給元素定義邊框?qū)傩?，邊框?qū)⒊霈F(xiàn)在內(nèi)邊距和外邊距之間。

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

猜你喜歡：

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

怎樣給盒子模型設(shè)置外邊距？

盒子模型的圓角邊框怎樣實(shí)現(xiàn)？

傳智教育前端與移動開發(fā)高手班

上一篇：網(wǎng)站性能優(yōu)化的10種方法 下一篇：2D變形效果有幾種？變形效果講解