解决width: 100%；再设置margin问题

最近在做前端，遇到了这么个小问题，就是当我们把一个 div 的 width 设置为 100% 之后，再设置 margin 的时候 这个div 莫名其妙的超出了屏幕。情景如下图：

这就很难受了啊！！! 不过办法总比困难多，下面，我将讲两种解决方法：

方法一：计算宽度法 

从上图中我们可以看到 我这里左右边距都设置的是 30px，所以总边距为 60px，知道总边距之后就好办了，我们可以将 width 设置为 width： calc(100% - 60px)

width: calc(100% - 60px); //这个 60px 是根据 你自己的 margin 来的
margin: 15px 30px;

完美解决

方法二：padding + box-sizing: border-box;

这个属性我就不过多解释了，网上一大堆讲解的，我们直接上代码

width: 100%;
padding: 15px 30px;
box-sizing: border-box;

效果如下：