css 父元素相对定位并设置padding 子元素宽度设置100%,会超出父元素宽度

QQ截图20211125085631.png

这个问题很好重现,代码如下




    
    
    Document
    


    

网上找了很多 都没有找到点上,解决办法无非是设置 box-sizing: border-box; 一点用没有
只要父元素设置padding,子元素设置100% ,这个问题会一直存在

解决办法一

子元素宽度不要设置100% 而是继承父元素的宽度 即width: inherit;


image.png

完整代码如下




    
    
    Document
    


    
左侧盒子
右侧侧盒子

拷贝到浏览器直接测试

解决办法二 利用 calc属性,子元素宽度设置width: calc(100% - 20px); 减掉两侧内间距

你可能感兴趣的:(css 父元素相对定位并设置padding 子元素宽度设置100%,会超出父元素宽度)