题意大意：创建一个正方形，其边长定位相对浏览器窗口的宽度变化而变化。
实现思路：本次实现主要应用padding-bottom（或padding-left）属性值等于width（或height）来实现等边长的矩形（即正方形）。
大致效果：
一种实现：设置width相对百分比，padding-bottom取值等于height。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自适应浏览器窗口宽度的正方形</title>
<style>
body{
margin:0;
padding:0;
background:#FFFBCD;
}
.square{
width:30%;
padding-bottom:30%;
margin-top:10%;
margin-left:10%;
background:#0000FF;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自适应浏览器窗口宽度的正方形</title>
<style>
body{
margin:0;
padding:0;
background:#FFFBCD;
}
.square{
height:30%;
padding-left:30%;
margin-top:10%;
margin-left:10%;
background:#0000FF;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
