怎么创建一个宽高都等于父元素一半的子元素

这个题目是在面试的过程中被问到的。一开始直接想到的是 vw 来实现，但是被告知会有兼容性问题。让我再想一下有没有其他实现方式,后来厚着脸皮去问了面试官怎么实现，面试官说用 padding 就可以实现。所以在此总结记录一下。

缺点是相对于父元素必须是可视区域（window）。有兼容性问题。

<body>
<div class="test"></div>
</body>

1
2
3

body{
    margin:0
}
.test {
        background: red;
        width: 50vw;
        height: 50vw;
    }

1
2
3
4
5
6
7
8

可以利用margin和padding的一个特性。margin和padding的百分比都是基于父元素的宽度和高度。这个兼容性更好，父元素不用是可视区域。

<body>
<div class="test"></div>
</body>

1
2
3

body{
    margin:0
}
.test {
    background: red;
    width: 50%;
    padding: 25%;
    box-sizing: border-box;
}

1
2
3
4
5
6
7
8
9