<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的height为0,padding-bottom为百分比;该元素的高度等于父元素端度乘于该元素的padding-bottom百分比</title>
<style>
.wrapper {
width: 1000px;
height: 500px;
background-color: red;
}
.box{
width: 100px;
height: 0;
background-color: deepskyblue;
padding-bottom: 20%; /* 会以父元素的宽度乘于这个百分比 来作为高度 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
元素的height为0,padding-bottom为百分比;该元素的高度等于父元素端度乘于该元素的padding-bottom百分比
最新推荐文章于 2022-06-13 12:04:01 发布