1、給標籤寬度但是不設置高度，設置內邊距padding，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自適應正方形</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box{
width: 50%;
padding-top: 50%;
background-color: black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
結果如下：
2、給標籤設置寬度但是不設置高度，在標籤內部添加一個空元素，給空元素設置外邊距margin-top來實現，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自適應正方形</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.Box{
width: 50%;
overflow: hidden;
background: black;
}
.Mrgin{
margin-top: 100%;
}
</style>
</head>
<body>
<div class="Box">
<div class="Mrgin"></div>
</div>
</body>
</html>
結果如下：
自適應正方形實現的原理就是根據標籤元素的padding會自動繼承元素的寬度來計算，並且元素內部的子元素的margin也是根據父元素寬度的百分比來算的，從而能實現自適應的正方形。