今天這篇筆記聊聊CSS中一個非常基礎(chǔ)但是很重要的概念——盒子模型：

什么是盒子模型

顧名思義，就是HTML的元素在網(wǎng)頁上的展示都是一個一個的盒子，四四方方的在頁面上排列著，比如像下面這樣，學(xué)習(xí)了盒子模型，為我們學(xué)習(xí)定位和布局等等高級樣式技巧打下基礎(chǔ)。

盒子模型的構(gòu)成

直接看這張圖：

• Content：內(nèi)容區(qū)域，也就是你代碼中放在元素內(nèi)的東西，比如說文字啊、子元素啊等等
• Border：邊框，也就是HTML元素的邊框，你可以使用border來設(shè)置邊框的寬度、顏色、樣式
• Padding：內(nèi)邊距，也就是Border（邊框）和Content（內(nèi)容）之間的距離
• Margin：外邊距，也就是HTML元素和它旁邊其他元素的距離

盒子模型的分類

根據(jù)盒子寬度和高度的計算方式，我們可以把它分為兩類，并通過box-sizing屬性來設(shè)置

• 標(biāo)準(zhǔn)盒模型：content-box，默認(rèn)
• IE盒模型：border-box

標(biāo)準(zhǔn)盒模型（content-box）的特點是：HTML元素真正的寬度=你設(shè)置的CSS寬度（width）+padding+border，高度同理

IE盒模型（border-box）的特點是：HTML元素的真正寬度=你設(shè)置的CSS寬度（width），高度同理

舉例

這個HTML的寬度=200+152+102=250

這個HTML的寬度=200