我们前端工作者在写项目的静态页面时,页面中某一部分的宽度高度是200px,此时就是指这个盒子本身的大小就是一个200*200的盒子(包括边框,内边距,外边距)。 但我们写的时候会先给盒子宽高分别是200px,然后根据项目的实际要求设置边框线和内外边距(如果此时四个内边距都是相同的宽度,会简单一些,如果每个边的宽度都不同,那就比较麻烦了),此时盒子总体的大小就改变了。为了解决这一问题,有了box-sizing这个属性,使用最频繁的属性值是:border-box
给大家上一段代码
.box{
width: 200px;
height: 200px;
background-color: aqua;
border: blue 1px solid;
padding: 20px;
box-sizing: border-box; /*重点*/
}
此时有了一个1px的边框线,同时还有了一个20px的内边距,如果不加box-sizing这个属性,那盒子总体的宽高应该就是242*242,那这个时候明显就不符合我们的工作需求了,如果此时通过认为的计算不仅耗费时间(在实际工作中时间是非常宝贵的,因为你每天都要固定的工作要做),而且还有算错的可能。
如果使用了box-sizing:border-box;这个命令,计算机就会根据宽高自动的计算好center,border,padding,margin;此时就为我们工作人员节省了很多的时间。