css實(shí)現(xiàn)正方形
如果僅僅是設(shè)置width 和 height的話媒佣，這個(gè)問(wèn)題就不用說(shuō)了，這里考慮的問(wèn)題主要是padding的百分比是相對(duì)于誰(shuí)來(lái)說(shuō)的
元素的padding 和 margin百分比都是想對(duì)應(yīng)父元素的width（父元素必須有width這個(gè)值 否則往上查找知道body）來(lái)說(shuō)的暑中， 如下通用的css正方形方案
- 相對(duì)于父元素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>
- 可以設(shè)置高度久脯，利用偽元素
<!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>
設(shè)置一個(gè)偽元素谆扎，偽元素用的是利用 padding-bottom撐起父元素的高度避咆，padding相對(duì)高度為 父元素的 width
- 不同單位 相對(duì)于視口 而且利用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>
