一个div，宽度通过百分比设置，要想div变成一个正方形，高度怎
2018-09-10 本文已影响296人
花式开心
原理:padding的百分比是根据父元素的宽度计算的
，所以当width是百分比时，可以使用padding-top拉开盒子的搞定，并且保证width所占的百分比和padding-top所占百分比一样高就ok了，下边上代码！
<!!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>正方形</title>
<style>
body,html{
width: 100%;
height: 100%;
}
.box{
width: 20%;
height: 0;
padding-top: 20%;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图
