css实现正方形
如果仅仅是设置width 和 height的话，这个问题就不用说了，这里考虑的问题主要是padding的百分比是相对于谁来说的
元素的padding 和 margin百分比都是想对应父元素的width（父元素必须有width这个值 否则往上查找知道body）来说的， 如下通用的css正方形方案
- 相对于父元素width
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 100px;
height: 100px;
}
.square {
width: 100%;
padding-bottom: 100%;
background: red;
}
</style>
</head>
<body>
<div class="container">
<div class="square">
</div>
</div>
</body>
</html>
- 可以设置高度，利用伪元素
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.square {
width: 100px;
background: green;
}
.square:after {
content: '';
display: block;
padding-bottom: 100%;
}
</style>
</head>
<body>
<div class="square">
</div>
</body>
</html>
设置一个伪元素，伪元素用的是利用 padding-bottom撑起父元素的高度，padding相对高度为 父元素的 width
- 不同单位 相对于视口 而且利用vw
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 5%;
height: 5vw;
background: red;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
