學(xué)習(xí)目標(biāo)：重溫html＋css

學(xué)習(xí)過程：w3c課程＋慕課網(wǎng)html＋css

完成：100%

什么是盒子模型？

參考資料：盒子模型科普、盒子模型講解

css幫助我們給html做美化，這就離不開各周位置的確定，盒子模型就如下圖所示：

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

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

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

盒子模型

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

margin

那用最簡單的代碼證明下盒子模型是如何工作的呢？其中padding也分上下左右，如果四周的樣式不一致，可以采用padding-top等標(biāo)記對(duì)分別設(shè)置。也可以依照順時(shí)針的方法設(shè)置padding: 20px 25px 30px 5px;則為上右下左各處的樣式。

div {

? ? width: 300px;

? ? border: 25px solid green;

? ? padding: 25px;

? ? margin: 25px;

}

最終元素的總寬度計(jì)算公式是這樣的：

總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

元素的總高度最終計(jì)算公式是這樣的：

總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

盒子模型適用于可以調(diào)節(jié)邊框的塊狀模型如：<div><ul><ol><p><h><table>等塊狀元素：

塊狀元素