CSS Div 正方形，宽度基于100%的高度
在本文中，我们将介绍如何使用CSS来创建一个具有正方形形状的div，并且其宽度基于其高度的百分比。我们将使用CSS的盒模型和伪元素来实现这个效果。
阅读更多：CSS 教程
使用盒模型创建正方形
首先，我们需要创建一个具有指定高度的div元素，并将其宽度设置为0。然后，我们使用padding-top属性来设置div的高度。由于padding属性的百分比值是相对于父元素的宽度的，我们可以设置padding-top为100%来使得div的高度等于其宽度。最后，我们使用position属性来将div相对于父元素进行定位，并将其top和left属性都设置为0，以使其撑满整个父元素。
下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.square {
width: 0;
padding-top: 100%;
background-color: red;
position: relative;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
在上面的代码中，我们创建了一个具有红色背景的正方形div。由于我们将padding-top设置为100%，所以这个div的宽度将等于其包含块的宽度，也就是父元素的宽度。
使用伪元素实现高度基于百分比的宽度
上面的方法可以创建一个正方形，但宽度的计算是基于父元素的宽度。如果我们希望宽度基于div自身的高度百分比计算，我们可以使用伪元素来实现。
我们创建一个具有指定高度的div，并使用伪元素在div内部创建一个占满整个div高度的正方形。然后，我们使用绝对定位将这个伪元素定位到div的左上角，并将它的宽度设置为100%。这样，伪元素的宽度就等于div自身的高度，我们可以使用这个宽度来设置div的宽度。
下面是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.square {
position: relative;
width: 0;
padding-top: 100%;
background-color: red;
}
.square::before {
content: "";
display: block;
padding-top: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
在上面的代码中，我们创建了一个具有红色背景的正方形div，同时使用伪元素在div内部创建了一个具有蓝色背景的正方形。由于伪元素的宽度是基于div自身的高度计算的，所以我们可以将它的宽度设置为100%，从而使div的宽度等于其自身的高度。
总结
通过使用CSS的盒模型和伪元素，我们可以很容易地创建出div的宽度基于其高度百分比的正方形。我们可以使用padding属性来设置div的高度，然后通过position属性和top、left属性将其定位到父元素的左上角。如果我们需要宽度也基于高度的百分比计算，我们可以使用伪元素来实现。这些技巧对于创建响应式的布局非常有用，可以帮助我们实现各种独特的设计效果。
此处评论已关闭