css 父级设置了padding，但是子元素还是会超过padding解决方案

最新推荐文章于 2024-10-13 21:53:16 发布

Technology_hands

最新推荐文章于 2024-10-13 21:53:16 发布

阅读量2.6k

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/technology_hands/article/details/127983127

版权

由上图所示，明明父级已经设置了一个padding,但是子元素还是跑出来了，这是为什么呢？

我看了一下，是因为子元素，设置了width100%,以后还设置了padding,导致的问题，因为我们的盒子是标准盒子模型，width的宽度只是内容content的宽度，加上padding就会导致大于100%，所以有两个解决方案，一个是将盒子模型转换成怪异盒子模型，（box-sizing:border-box），一个是在移动端不要使用width:100%，的情况下就使用padding就不会超过100%。