border-box 改变盒子的布局方式

今天来聊一个我们在前端开发中很常见的属性box-sizing: border-box
如果声明了一个元素且该元素是盒子模型，那么该元素默认的盒子模型是以border（边框）为边界，border里面是content（内容）。外边的是padding（填充），再外边的是margin（边距）：

一旦声明了box-sizing: border-box，则盒子内容区就包含content和padding
。盒子外边只有margin。

如果不太清楚，自己可以写几个盒子模型在开发者工具里好好琢磨琢磨。

！！！默认的盒子模型在创建的时候就已经存在了margin，padding，border。所以可以在body里面先去掉这些默认值。