學(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)記對分別設(shè)置。也可以依照順時針的方法設(shè)置padding: 20px 25px 30px 5px;則為上右下左各處的樣式槽奕。
div {
? ? width: 300px;
? ? border: 25px solid green;
? ? padding: 25px;
? ? margin: 25px;
}
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
盒子模型適用于可以調(diào)節(jié)邊框的塊狀模型如：<div><ul><ol><p><h><table>等塊狀元素：
塊狀元素
