【css】width:100%；padding:20px；造成超出100%宽度的解决办法 - box-sizing的使用方法 - CSS布局

问题

修改效果

解决方法

.xx {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

默认box-sizing: content-box下，
width = 内容的宽度
height = 内容的高度
宽度和高度的计算值都不包含内容的边框（border）和内边距（padding）。

可选box-sizing: border-box;下，
width = border + padding + 内容的宽度  >> 不包括margin
height = border + padding + 内容的高度  >> 不包括margin

参考

CSS系列之 box-sizing-CSDN博客文章浏览阅读8.3k次，点赞18次，收藏41次。本文详细介绍了box-sizing属性的两种模式：content-box和border-box，讲述了它们如何影响元素尺寸计算，并通过示例展示了两者在实际布局中的效果。记住，border-box模型包含了内容、内边距和边框，而content-box则不包含外边距。https://blog.csdn.net/weixin_62277266/article/details/123023988