点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

为了解决不同浏览器之间的一些行为差异，前端都会在代码里加一段CSSReset代码，来将所有的元素设置统一的样式，从而保证我们能在一个统一的样式下开始开发项目。

大多数人，这部分代码都不愿意手动去写，经常会用一些现有的库来处理这部分工作，如normalize.css，minireset等等。其实这里面有好多冗余的CSS代码。我一般不太喜欢这么搞。

一、加行代码

然而，如果你也是和我一样，是自己去写这部分代码的话，我建议你往里加一行代码，如下所示：

如上面代码所示，margin和padding没什么奇怪的，主要注意box-sizing我设置了border-box。

二、解释代码

对的，所有的DOM的都应该为border-box。如果有人对box-sizing不是很了解的话，那么，下面，接下来我就给大家理清一下它的用法。（之前，我的文章里有写过它的详细用法，可以参考）

它主要有两种取值：

1、content-box

当设置某个元素的宽高（width/height）时，仅仅会作用于其内容尺寸。其它，所有的padding和margin都是在其之上的累加。

比如：有个DIV设置width=80，padding=10，那么最终元素占用100（80+2*10）像素。

2、border-box

记住，padding和margin是包含在了宽高之内的。

比如，有个DIV设置width=80，padding=10，marign=10那么最终元素占用80（40+2*10+2*10）像素。

总结一下：

在重置代码里将元素设置为border-box会很方便我们进行样式布局。比如可以在父元素设置高度限制而不担心子元素的内边距或者边框来打破这种限制。