元素的margin（水平和垂直margin）和padding（水平和垂直padding）百分比竟然都是相對于父元素的寬度

<div class="outer">
       <div class="inner"></div>
    </div>

 <style>
        .outer{
            width: 200px;
            height: 100px;
        }
        .inner{
            width: 60px;
            height: 60px;
            padding-top: 10%; // 相對于父元素的寬度10%：20px
            padding-left: 20%; // 相對于父元素的寬度20%：40px
            margin-top: 30%; // 相對于父元素的寬度30%：60px
            margin-left: 40%; // 相對于父元素的寬度40%：80px
        }
    </style>

inner的盒子模型：

利用此知識點的面試題

1.div水平垂直居中，并且高度永遠是寬度的一半

*{
margin: 0;
padding: 0;
}
.out{
  width: 800px;
  height: 700px;
  border:1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.inner{
  width: 500px;
  background: pink;
}
.inner div{
  padding:25% 0;
}

<!--讓inner在out中水平垂直居中，并且inner高度永遠是寬度的一半-->
<div class="out">
  <div class="inner">
    <div></div>
  </div>
</div>

2.畫一個大小為父元素寬度一半的正方形

*{
margin: 0;
padding: 0;
}
.out{
  width: 800px;
  height: 700px;
  border:1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.inner{
  padding:25%;
  background: pink;
}

<!--讓inner在out中水平垂直居中，并且inner高度永遠是寬度的一半-->
<div class="out">
  <div class="inner"> </div>
</div>