问题
我们发现,如果子元素设置宽度为100%,然后设置了margin或者padding的话,会超出父布局的宽度:比如
效果如下
解决方式
参考博文
参考博文2
box-sizing
通过参考博文,我们知道可以使用box-sizing来设置
content-box
是box-siziing的默认值,也就是上面的效果,
border-box
不会改变设置的宽高,会在内部对内容进行压缩
inherit
继承父布局的box-sizing属性
参考解决方式
父布局和子布局都设置了100%,但是父布局设置了border和box-sizing为border-box(有时子布局也不用设置100%)