虽然设置的是垂直方向的高度,有意思的是当该值为一个百分比的时候表示的是和本身包含的元素的宽度有关。
换句话就是说, padding-top 和 padding-bottom 的值为百分比时,其实表示的是其元素宽度的百分比。
因此,在容器宽度不确定的情况下(如: 80% , flex: 1 等),保持容器宽高比不变,可以通过设置元素的 padding-top 或 padding-bottom 值。
例如,保持宽高比为16:9:
这个在保持图片的宽高比时非常有用。
可以给要设置固定高宽比例的元素加上max-width:300px
或
min-weidth
具体数值自己定义
注意不要再设置width
css固定宽度使用width属性来定义即可,如下这个案例。
<div class="box">这是一个宽度为300px的div</div> .box{width:300pxheight:200pxborder:1px solid #333}这样子class名为box的这个div宽度就固定在了300px。