1.容器的高度百分比是基于父集的高度的。但是padding和margin是基于父集的寬度的
- 絕對定位元素的基準(zhǔn)點(diǎn)是包含父集的padding的
- 絕對定位元素直接設(shè)置四周為零，即可讓它寬度和高度均為100%
- css也可以進(jìn)行計(jì)算，并且單位還可以不同 calc
實(shí)現(xiàn)代碼：
<style>
html,body{
width: 100%;
height: 100%;
}
.box {
width: 100%;
padding: 0;
margin: 0;
height: 0;
padding-top: calc(580 / 1920 * 100%);
position: relative;
}
.box img {
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="http://img.mobiletrain.org/templates/mobiletrain/images/qf-2018-html5/banner0.jpg" alt="">
</div>
</body>
當(dāng)頁面縮放時，布局不會亂，當(dāng)圖片沒加載出來時也會有div占位，不會塌陷，應(yīng)用場景：懶加載
