- 盒模型由四部分組成：
- 內(nèi)容邊界（Conent edge）
- 內(nèi)邊距邊界（Padding Edge）
- 邊框邊界（Border Edge）
- 外邊框邊界（Margin Edge）
- ie盒模型和w3c標(biāo)準(zhǔn)和盒模型
- ie怪異盒模型：width和height包含padding和border
- w3c標(biāo)準(zhǔn)盒模型：width和height不包含padding和border
這么說(shuō)吧：如果采用ie怪異模型盐欺，盒子元素實(shí)際占據(jù)的寬高是 height/width屬性值 + margin。如果采用標(biāo)準(zhǔn)盒模型仅醇，盒子元素實(shí)際占據(jù)的寬高是 height/width屬性值 + padding + border + margin
- box-sizing屬性(需要前綴兼容)
- content-box w3c標(biāo)準(zhǔn)盒模型（默認(rèn)值）
- boder-box ie盒模型
<style>
.ie,
.w3c {
height: 200px;
width: 200px;
background: #999999;
padding: 20px;
border: 1px solid red;
}
.ie {
box-sizing: border-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
</style>
<body>
<div class="ie">
我是ie盒模型,width和height包含padding和border冗美，實(shí)際寬高200px
</div>
<br>
<div class="w3c">
我是ie盒模型,width和height不包含padding和border，實(shí)際寬高240px
</div>
</body>
盒模型
- box-sizing使用場(chǎng)景
- 布局時(shí)防止添加border屬性導(dǎo)致?lián)Q行（一行四列布局析二，每個(gè)元素占據(jù)25%的寬度粉洼，如果添加border那么最后一個(gè)元素就換行了，此時(shí)可以將四個(gè)元素改為box-sizing:border-box解決）還有一個(gè)解決方法： 使用outline屬性叶摄，嘻嘻
ps:有個(gè)老哥寫(xiě)的阿里面經(jīng)談到好幾個(gè)box-sizing的使用場(chǎng)景漆改，但我只想到一個(gè)，如果知道其他的請(qǐng)?jiān)u論指點(diǎn)
