根据MDN的解释：当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。即每个盒子包含四部分：内容区域（content），内边距(padding)，边框(border)，外边距(margin)（由内而外）。
//css
.box{
width:100px;
padding:20px;
border:1px solid #111;
margin:10px;
}
//html
<div class='box'>
content
</div>
在chrome开发者工具中选中.box的元素，可以发现该元素的实际宽度并不是设置的100px，而是100+20*2+1*2=142px,即包含内容区域，内边距，边框的总宽度。
引用chrome中的盒子模型图：
盒模型content-box.jpg
这点和我们平时的认知并不相符，此时就需要
box-sizing这个属性。box-sizing的值是用来设定width,height的作用对象的，默认是content-box，即width作用域content区域，当把box-sizing设置为border-box，情况就不一样了，width的作用对象是border以内的区域。box-sizing设置为border-box后的盒子模型图：
盒模型border-box.jpg
为了更加符合我们的认知，设置为
border-box为最佳实践。
网友评论