css 盒模型
CSS 盒模型
在 CSS 中,我们可以通过:
- box-sizing: conent-box; 将盒子设置为标准模型(盒子默认为标准模型)
- box-sizing: border-box; 将盒子设置为 IE 模型(也叫做怪异盒子)
话不多说直接上图
.container{
width:200px;
border:1px solid red;
padding:10px;
margin:20px;
}
如果
box-sizing: conent-box;
那么写的 width:200px 是content,就是图中的蓝色区域。
如果
box-sizing: border-box;
如下图
width 的200px 就是 content + padding + border
border-box 更加好用。
转载自:https://segmentfault.com/a/1190000041194173