父級寬高不定理郑，子級元素要寬高都是父級元素寬度的一半找田，即一個(gè)正方形
1. 利用padding來實(shí)現(xiàn)
.parent {
width: 200px;
height: 400px;
display: flex;
jsutify-content: center;
align-items: center;
background: aqua;
}
.child {
width: 50%;
// height: 50%; 面試的時(shí)候一開始回答了這個(gè)缠诅，難受宿礁，搞混了margin-top，padding-top和height的區(qū)別茬射，前兩者是都相對與父級的寬度鹦蠕，最后一個(gè)是相對于父級的高度
height: 0;
padding-top: 50%; // padding有顏色，而且計(jì)算起來是根據(jù)父級的寬度來計(jì)算的
background: red;
}
2. 利用偽類來實(shí)現(xiàn)
.parent {
width: 200px;
height: 400px;
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.child {
/* height: 0; 不能設(shè)置高度為0了在抛，這樣高度撐不開 */
width: 50%;
background: yellow;
overflow: hidden; /* 這里主要是形成一個(gè)BFC塊钟病，不然child會隨著偽類一起向下，就不能實(shí)現(xiàn)偽類撐開child的效果了 */
}
.child:after {
content: '';
display: block;
margin-top: 100%; /* 這里實(shí)現(xiàn)撐開child刚梭，margin-top也是相對于父級的寬度 */
}
