CSS布局：父元素padding与子元素100%宽度冲突如何解决？

在CSS布局中，当父元素设置了padding，而子元素设置了width: 100%时，子元素的宽度会超出父元素的内容区域，导致布局问题。这是因为width: 100%是基于父元素的内容区域计算的，而父元素的padding会增加父元素的总宽度。

解决方法

1. 使用box-sizing: border-box 将父元素的box-sizing属性设置为border-box，这样父元素的padding和border会包含在元素的宽度内，子元素的width: 100%将基于父元素的总宽度（包括padding和border）计算。

   .parent {
      padding: 20px;
      box-sizing: border-box;
   }
   
   .child {
      width: 100%;
   }
   

2. 使用calc()函数 如果不想改变父元素的box-sizing，可以使用calc()函数来调整子元素的宽度，减去父元素的padding。

   .parent {
      padding: 20px;
   }
   
   .child {
      width: calc(100% - 40px); /* 40px是左右padding的总和 */
   }
   

3. 使用margin代替padding 如果可能，可以考虑使用margin来代替父元素的padding，这样不会影响子元素的宽度计算。

   .parent {
      margin: 20px;
   }
   
   .child {
      width: 100%;
   }
   

4. 使用overflow: hidden 如果父元素的padding是固定的，并且你希望子元素不超出父元素的范围，可以在父元素上设置overflow: hidden。

   .parent {
      padding: 20px;
      overflow: hidden;
   }
   
   .child {
      width: 100%;
   }
   

总结

最常用的方法是使用box-sizing: border-box，因为它可以简化布局计算，避免因padding和border导致的宽度问题。如果不想改变box-sizing，可以使用calc()函数来调整子元素的宽度。根据具体需求选择合适的方法即可。