css3 高级特性(3)：盒模型你应该要了解的box-sizing

盒模型你应该要了解的box-sizing

css3 高级特性系列，就是用css3实现一些项目中经常用到的demo，真实场景真实好用

为什么使用box-sizing

使用box-sizing属性的目的是对元素的总高度做一个控制，如果不使用该属性，样式是默认是使用content-box，它只是对内容的宽度做了一个指定，却没有对元素的总宽度进行指定。

在布局的场合中利用border-box属性值会使得页面布局更加方便

• 知识储备

盒模型本质上是一个盒子，所有的html元素都是一个盒子，盒模型包含content、padding、border、margin

box-sizing是用来确定使用的元素用哪种盒模型

1. content-box 标准盒子模型 默认值
2. border-box IE盒模型（怪异盒子模型）
3. inherit 指定 box-sizing 属性的值，应该从父元素继

box-sizing的content的计算

问题：准备2个盒子，赋予同样的宽高，那么实际的content是多少？

结论：

1. 盒子为content-box时，content=200，说明设置的with:200px 仅仅是内容的宽度，不包含padding和border
2. 盒子为border-box时，content=180，说明设置的with:200px 是内容的高度+padding+border

html代码

<div class="content">
    <div class="box content_box">content-box</div>
    <div class="box border_box">border-box</div>
</div>

CSS代码

.content{
    display: flex;
    width: 800px;
    height: 200px;
    background: #f8b907;
    justify-content: space-between;

}
.box {
    width: 200px;
    height: 200px;
    border: 5px solid #666;
    padding: 5px;
    margin: 5px;
    background-color: #8bc34a;
    color: #fff;
}

.content_box {
    box-sizing: content-box;
}

.border_box {
    box-sizing: border-box;
}

题外知识

• backgroud的color到底是渲染的是盒模型哪一部分？

从上面一个例子中可以看到backgroud-color渲染了content+padding区域，border是黑色的，那么真的是这样吗？

先设置border的颜色为透明色，看一下下面的图，

border: 5px solid transparent;

从图中我们可以看到border的部分也是有背景颜色的哦

• 结论

backgroud的color颜色是从border开始渲染，包含区域border+padding+content

参考

html5与CSS权威指南(第三版)

结语

如果对本文有任何疑问，欢迎提问哦 如果本文对你有一丁点帮助，点个赞支持一下吧，感谢感谢

本文将同步到个人公众号：言字（欢迎关注👏）