CSS盒模型是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)非常重要的概念，它用于描述網(wǎng)頁(yè)中所有的HTML元素都是由一個(gè)矩形盒子組成的。

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 10px;
}

在CSS盒模型中，每個(gè)矩形盒子包括四個(gè)部分：內(nèi)容區(qū)、內(nèi)邊距、邊框和外邊距。

• 內(nèi)容區(qū)：即為一個(gè)HTML元素本身的寬高。如上述例子中，內(nèi)容區(qū)的寬為200px，高為100px。
• 內(nèi)邊距：它位于內(nèi)容區(qū)和邊框之間，用于控制內(nèi)容區(qū)與邊框之間的距離。如上述例子中，內(nèi)邊距為20px。
• 邊框：它包圍著內(nèi)容區(qū)和內(nèi)邊距，用于控制邊框的樣式、寬度和顏色。如上述例子中，邊框?yàn)?px粗，黑色。
• 外邊距：它位于邊框和相鄰元素之間，用于控制元素與相鄰元素之間的距離。如上述例子中，外邊距為10px。

通過(guò)CSS盒模型，我們可以控制矩形盒子的大小、位置、內(nèi)距、邊框和外距等屬性，從而實(shí)現(xiàn)豐富多樣的網(wǎng)頁(yè)布局和設(shè)計(jì)效果。