css盒子模型分為標(biāo)準(zhǔn)盒子模型和ie盒子模型，分別對應(yīng)
box-sizing: content-box | border-box
| 值 | 描述 |
|---|---|
| content-box | 這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。 |
| border-box | 為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。 |
寫一段代碼看一下區(qū)別：
div {
width: 200px;
background: red;
height: 200px;
padding: 50px;
margin: 50px;
box-sizing:border-box;
border: 10px solid;
}
content-box
可以看到content-box中width僅計算contentWidth
border-box
而border-box中width是計算contentWidth+padding+border
在實(shí)際生產(chǎn)環(huán)境中個人更傾向于使用border-box，可以使我更直觀地設(shè)置我想要達(dá)成的效果而免去考慮其他屬性造成的影響。
