- 盒模型由四部分组成：
- 内容边界（Conent edge）
- 内边距边界（Padding Edge）
- 边框边界（Border Edge）
- 外边框边界（Margin Edge）
- ie盒模型和w3c标准和盒模型
- ie怪异盒模型：width和height包含padding和border
- w3c标准盒模型：width和height不包含padding和border
这么说吧：如果采用ie怪异模型，盒子元素实际占据的宽高是 height/width属性值 + margin。如果采用标准盒模型，盒子元素实际占据的宽高是 height/width属性值 + padding + border + margin
- box-sizing属性(需要前缀兼容)
- content-box w3c标准盒模型（默认值）
- 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，实际宽高200px
</div>
<br>
<div class="w3c">
我是ie盒模型,width和height不包含padding和border，实际宽高240px
</div>
</body>
盒模型
- box-sizing使用场景
- 布局时防止添加border属性导致换行（一行四列布局，每个元素占据25%的宽度，如果添加border那么最后一个元素就换行了，此时可以将四个元素改为box-sizing:border-box解决）还有一个解决方法： 使用outline属性，嘻嘻
ps:有个老哥写的阿里面经谈到好几个box-sizing的使用场景，但我只想到一个，如果知道其他的请评论指点
网友评论