此问题,你的业务中可能不涉及到,但面试官可能会考你的,所以还是得好好了解下这基本css功。
给如下代码,思考一分钟,你觉得应该怎么设置,有哪几种方法?
// html 片段
<div class="father">
<div class="son"></div>
</div>
一分钟分界线
第一种,利用padding-bottom实现
.father {
width: 100%;
height: 600px;
}
.son {
width: 100%;
height: 0;
padding-bottom: 50%;
}
原理:子元素的width:100%,padding-bottom:50%,都是相对于最近的父元素的,padding-bottom设置为父元素的一半,那么剩余的子元素为自适应
好处:不需要考虑兼容性
第二种,利用calc
.son {
width:100%;
height:calc(50%);
}
</