<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>实现高是宽的一半</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
/* 第一种方案 */
/* .box {
width: 100vw;
height: 50vw;
background-color: pink;
} */
/* 第二种方案 */
/* .box {
width: 25%;
height: 0;
padding-bottom: 12.5%;
background: blue;
} */
</style>
<body>
<section class="box"></section>
<script>
let a = `padding-top、padding-bottom、margin-top、margin-bottom 属性设置为百分比时，参考对象都是父级元素的宽度。`;
</script>
</body>
</html>
