子元素设置width:100%，同时设置了margin:20rpx，这时候样式会有溢出的现象

问题：子元素设置width:100%，同时设置了margin:20rpx，这时候样式会有溢出的现象

代码：

        .father{
            height: 100px;
            width: 100px;
            background: green;
        }
        .child-1{
            height: 100%;
            width: 100%;
            border-radius: 20px;
            margin:20px;
            background: red;
        }

<div class="father">
        <div class="child-1"></div>
    </div>

 

解决方法：

1、子元素不设置margin，父元素设置padding

.father{
            height: 100px;
            width: 100px;
            padding:20px;
            background: green;
        }
        .child-1{
            height: 100%;
            width: 100%;
            border-radius: 20px;
            /* margin:20px; */
            background: red;
        }

这时候父元素宽高变成了140px

如果想要父元素宽高还是设置的100px，需要加上box-sizing: border-box;

.father{
            height: 100px;
            width: 100px;
            padding:20px;
            background: green;
            box-sizing: border-box;
        }
        .child-1{
            height: 100%;
            width: 100%;
            border-radius: 20px;
            /* margin:20px; */
            background: red;
        }

总结，子元素去掉margin，父元素加上padding和box-sizing: border-box;