标签：col 作用 自适应 title TE tom hidden content ack
高度随宽度自适应有很多种方案，这里只讨论一种巧妙的方案，就是利用margin/padding。我把代码记录下来供以后开发时参考，相信对其他人也有用。
margin/padding有这么一个很巧妙的知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是top/bottom，都是以父元素的width为参照物的！
那么可以使用padding-bottom/top来实现自适应方案一，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div {
width: 50%;
background-color: green;
padding-top: 70%;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>然而这个代码有一个缺点，就是无法设置max-height。原因是它的height是0，它是靠padding撑起来的，但是padding不属于height。所以我们有如下方案二。
可以使用margin-bottom/top来实现自适应方案二，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div {
width: 50%;
background-color: green;
overflow: hidden; //形成BFC，不影响外面的元素
max-height: 300px;
}
.div:after {
content: '';
display: block;
margin-top: 50%;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>可以看到，max-height起了作用。
由于没有规定高度，那么向其中填充内容势必会占据一定的空间从而影响高度。所以这个时候一般利用绝对定位来向其中填充内容。
标签：col 作用 自适应 title TE tom hidden content ack
原文地址：https://www.cnblogs.com/yangzhou33/p/9175651.html
