CSS盒子模型（CSS Box Model）是CSS設(shè)計(jì)中非常重要的一個(gè)概念。簡(jiǎn)單來(lái)說(shuō)，它是一種把HTML元素看作由多個(gè)不同的部分組成的模型。每個(gè)部分都有它自己的屬性，比如寬度、邊框和內(nèi)邊距。下面我們?cè)敿?xì)來(lái)看看CSS盒子模型。

.box{
width:200px;
height:100px;
padding:10px; 
border:1px solid gray;
margin:10px;
}

CSS盒子模型包括四個(gè)部分：content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）。

首先是content（內(nèi)容）部分，這是盒子中放置實(shí)際內(nèi)容的部分。它的大小由width（寬度）和height（高度）屬性決定。

接下來(lái)是padding（內(nèi)邊距）部分，它是content與border之間的空間，通常用于控制內(nèi)容與邊框之間的距離。padding的大小由padding-top、padding-right、padding-bottom和padding-left屬性決定。

再來(lái)是border（邊框）部分，它是盒子的邊界，常常用于為元素增加裝飾效果。border的大小由border-width、border-style（線性樣式）和border-color屬性共同決定。

最后是margin（外邊距）部分，它是盒子與其他元素之間的距離，用于控制盒子與其他元素之間的空隙。margin的大小由margin-top、margin-right、margin-bottom和margin-left屬性決定。

以上就是CSS盒子模型的四個(gè)部分，它們共同構(gòu)成了HTML元素的基本結(jié)構(gòu)。在編寫(xiě)CSS樣式時(shí)，我們需要對(duì)每個(gè)部分進(jìn)行單獨(dú)設(shè)置，以實(shí)現(xiàn)所需的頁(yè)面效果。