height=0

假设有这样的需求，要使元素的高随着width的变化而出现等比例的变化，使得元素的形状比例依旧正常。

这一需求更多是在响应式开发中遇到

代码

HTML

1
2
3
<div class="father">
    <div class="child"></div>
</div>

CSS

1
2
3
4
5
6
.childbox{
	padding-bottom: 50%;     //该处的百分百为效果的比例
	width: 25%;
	height: 0;         // ！！
	background: #ccc;  //该处为凸显该元素的作用
}

原理

子元素的 padding 属性百分比的值是相对于父容器的宽度而言的，这点很重要

使用padding-bottom来代替height来实现高度与宽度成比例的效果，将padding-bottom设置为想要实现的height的值。
上面的padding-bottom: 50%，对应效果：高度为宽度的50%。修改百分比以达到你想要的效果。

同时将其height设置为0，以使元素的“高度”等于padding-bottom的值，从而实现需要的效果。

width=0

这里要谈到弹性布局flex，

看下面这布局，重点在颜色框框

代码

HTML

1
2
3
4
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

1
2
3
4
5
6
.box{
    display: flex;
}
.right{
	flex-grow: 1;
}

默认左元素有内容，占据一些宽度，

明显当右边子元素（红色框）,内容过多会挤出父元素。

解决

1
2
3
4
5
6
7
.box{
    display: flex;
}
.right{
	flex-grow: 1;
    width: 0;        // 关键
}

效果：