box-sizing
定义盒子模型的计算方式
box-sizing:content-box;
默认值,我们定义的宽高,就是内容区域的宽高
元素占地宽度=左外边距+左边框+左内边距+内容区域的宽度+右内边距+右边框+右外边距
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/369fe65140acf63c99d24ddd7031f2bd.png)
box-sizing:border-box;
我们定义的width/height,是指border包含部分的宽高(含border)
元素占地宽度=左外边距+width+右外边距
box-sizing:border-box;的使用时机:
一个容器内,在一行显示多个元素,如果子元素的width使用%定义,那么基本就要使用border-box了