方法一：使用 CSS3 的 vw，vh 單位
- 用
vw或%單位設(shè)置寬度，用vw單位設(shè)置相同高度即可； - 用
vh單位設(shè)置寬度和高度
.square-a{
/* width: 20%; */
width: 20vw;
height: 20vw;
}
方法二：使用垂直方向上的 padding 撐開(kāi)容器
- 使用
padding-bottom撐開(kāi)容器，如果容器有內(nèi)容需要設(shè)置height: 0px，否則正方形高度會(huì)被撐開(kāi) - 使用
padding-top撐開(kāi)容器，和前者基本相同，唯一的區(qū)別是如果content沒(méi)有脫離文檔流，content內(nèi)容會(huì)顯示到容器外邊，使用時(shí)需注意
.square-b {
/* width: 20vw; */
width: 20%;
height: 0px;
padding-bottom: 20%;
}
方法三：使用偽元素設(shè)置 margin 或者 padding 撐開(kāi)容器
- 利用
::before或::after偽元素設(shè)置垂直方向的margin或者padding，需要注意content需脫離文檔流，否則正方形會(huì)被撐開(kāi)
.square-c {
width: 20%;
}
.square-c::after {
content: '';
display: block;
margin-top: 100%;
}
案例所有代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.square-a {
width: 20vw;
height: 20vw;
background-color: green;
color: #fff;
position: relative;
}
.square-b {
/* width: 20vw; */
width: 20%;
height: 0px;
padding-top: 20%;
background-color: orange;
color: #fff;
position: relative;
}
.square-c {
width: 20%;
background-color: blue;
color: #fff;
position: relative;
}
.square-c::before {
content: '';
display: block;
margin-top: 100%;
}
/* 正方形內(nèi)容居中 */
[class^="square"] div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body style="display: flex;">
<div class="square-a"><div>正方形</div></div>
<div class="square-b"><div>正方形</div></div>
<div class="square-c"><div>正方形</div></div>
</body>
</html>
顯示效果：
square.png
點(diǎn)贊、收藏的人已經(jīng)開(kāi)上蘭博基尼了 (′▽`???)
轉(zhuǎn)載請(qǐng)注明出處?。。。?a href="http://www.itdecent.cn/p/905bef8a320d" target="_blank">http://www.itdecent.cn/p/905bef8a320d)
