父元素宽高未知的内部实现正方形**padding 的百分比数值是相对父元素宽度的宽度计算的。**所以只需将元素垂直方向的

面试京东校招遇到的一个题，父元素宽高未知，在其内部实现一个正方形

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    .main {
      width: 100%;
      height: 100%;
      background: red;
    }
    .a{
      width: 50%;
      padding-bottom: 50%;//padding 的百分比数值是相对父元素宽度的宽度计算的。
      background: yellow;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="a"></div>
  </div>
</body>

</html>

**padding 的百分比数值是相对父元素宽度的宽度计算的。**所以只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了

width: 基于父元素的width

height: 基于父元素的height

margin(top, right, bottom, left): 基于父元素的width

padding(top, right, bottom, left): 基于父元素的width