css之子布局100%，设置margin后超出父布局

问题

我们发现，如果子元素设置宽度为100%，然后设置了margin或者padding的话，会超出父布局的宽度：比如

效果如下

解决方式

参考博文
参考博文2

box-sizing

通过参考博文，我们知道可以使用box-sizing来设置

content-box

是box-siziing的默认值，也就是上面的效果，

border-box

不会改变设置的宽高，会在内部对内容进行压缩

inherit

继承父布局的box-sizing属性