在多数浏览器的盒子模型中 box-sizing 默认为 content-box (这应该是一种 "错误的设计")
但这会在实际开发中导致很多让人意想不到的 "错误" , 尤其是在为元素设置高度或宽度的时候
这里我们推荐将默认的 box-sizing 设置为 border-box 以便统一, 并减少混淆
如下所示 :

您也可以使用如下代码, 用来实现重置效果

/* 移除默认的 margin */ body { margin: 0; } /* 在多数浏览器的盒子模型中 box-sizing 默认为 content-box (这应该是一种 "错误的设计") 但这会在实际开发中导致很多让人意想不到的 "错误" , 尤其是在为元素设置高度或宽度的时候 这里我们推荐将默认的 box-sizing 设置为 border-box 以便统一, 并减少混淆 */ html { box-sizing: border-box; } /* 配合上一段 css 实现 box-sizing 的规范化 */ *, *:before, *:after { box-sizing: inherit; } /* 重置表单元素的字体 */ button, input, optgroup, select, textarea { font-family: inherit; }