CSS盒子模型是我們布局網頁中非常常見的一種模型。網頁中的每個元素都是一個盒子(box),并且每個盒子都由四個部分組成:content(內容)、padding(內邊距)、border(邊框)和margin(外邊距)。
.box { /* 內容 */ width: 200px; height: 100px; /* 內邊距 */ padding: 10px; /* 邊框 */ border: 1px solid #000; /* 外邊距 */ margin: 20px; }
以上是一個盒子模型的基本代碼,其中content用來指定盒子的寬度和高度,它包含了元素的內容。padding用來為元素的內容區域留出空白,讓內容不至于緊貼在邊框上。border用來定義盒子的邊框,可以設定邊框的樣式、寬度和顏色。margin用來設置元素與其他元素之間的間距。
在實際應用中,盒子模型非常有用。比如,我們可以用它來設置頁面中的布局,實現元素之間的間距和對齊。在樣式編寫的時候,我們也可以根據具體需求來選擇是否設置內邊距和外邊框,讓網頁更加美觀和靈活。
上一篇css盒子模型特征
下一篇css盒子模型的寬度