什么是盒子模型？

CSS盒模型本質(zhì)上是一個盒子，用來封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒子模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

盒子模型圖片：

（視頻教程推薦：css視頻教程）

組成部分介紹：

Margin(外邊距) – 清除邊框外的區(qū)域，外邊距是透明的。

Border(邊框) – 圍繞在內(nèi)邊距和內(nèi)容外的邊框。

Padding(內(nèi)邊距) – 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。

Content(內(nèi)容) – 盒子的內(nèi)容，顯示文本和圖像。

元素的高度和寬度

當(dāng)我們指定一個 CSS 元素的寬度和高度屬性時，我們只是設(shè)置了內(nèi)容區(qū)域的寬度和高度。完整大小的元素還包括內(nèi)邊距，邊框和外邊距等。

示例：

效果圖：

推薦教程：CSS入門基礎(chǔ)教程