元素width:100%; 设置padding出现横向滚动条的问题

Posted 2020-11-01

当我们给块元素设置宽度为100%，然后再设置padding值想让里面的内容有一定的内边距时，会发现此时内边距的效果达到了，但是却出现了横向滚动条，

原因:padding 是边框和里面内容之间的间隙，如果你设置了padding，padding的值是不变的，当内容+padding大于容器时，它会以容器的左上角为中心，保持padding的距离向外扩展，因此出现了滚动条，正常解决办法是，将元素宽度减去padding值的2倍，但是现在元素宽度值并不是具体的px值，而是百分数，

这种情况下解决办法有两种：
1.最简单的办法是去掉元素宽度值设置，width:100%，块级元素默认就是100%宽度，设置padding后，padding会被计算为宽，实际效果的宽度会自适应的调整为100%。
2.利用css3新特性给父级设置box-sizing：border-box; 此时元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，元素设定的宽度和高度会自动减去边框和内边距得到内容的宽度和高度。