子容器宽度100%显示 为什么会超出父容器？

Question

https://codepen.io/ivanid/pen...

不知为何，这个子容器宽度会多出来左右padding的宽度（750+28*2）。总宽不是应该750px吗？

Answer 1

box-sizing:border-box;
子元素加这一句就能解决了
宽度100%你设置的是内容的宽度

Answer 2

默认就是这么算的啊，因为默认的box-sizing值是content-box，width设置的是content的值。
你这里width改成auto，或者子元素设置box-sizing:border-box就行了，
还有问题的话去找盒模型的相关资料研究把

Answer 3

看来对盒子模型还不是很了解啊

如果想撑满的话，根本不需要给宽度，默认就是铺满的。

如果一定要加上宽度，并且宽度是包含padding在内的，那么需要指定box-sizing:border-box;