1.利用vw、vh、vmin、vmax,vw表示的是viewport的宽度,也就是视口的宽度,vh表示的是视口的高度,vmin=min{vw,vh}取的是两者中较小的值,vmax ={vw,vh},1vm = 1% viewport width其他同理,所以利用上诉的单位来定义矩形的宽高即可实现等比变换。
1 div{2 width :1vm;3 height:1vm;4 }
2.利用垂直方向上的padding值,当容器中的内容超过了容器的宽高时,容器的内容会扩充到padding中,同时padding,margin如果设置为百分比,则均是相对于父级元素的宽度而言的,所以即可以使用如下方式宽高1:1,同理可以设置其他的比例,在这里需要注意一下,如果不写hegith的话,正方形内文字会溢出,溢出的高度正好就是文字所占空间的高度。 如果将padding-bottom换成padding-top,在正方形中有内容的时候,内容会在正方形外面,这是因为默认文字是从左到右,从上到下的排列所以paddin-top以后文字会在正方形外面
1 div{2 height:0px;3 width:100%;4 padding-bottom/top:100%;5 }
3.利用双层嵌套来写,将外层的div的position设置relative,内层的position设置为absoult,利用绝对定位消除空间占用 ,分别看设置成padding-top/padding-bottom的效果
1 <div class="square3"> 2 <div class="con"> 3 内容 4 </div> 5 </div> 6 <div class="square3-2"> 7 <div class="con"> 8 内容 9 </div>10 </div> 11 <style>12 .square3{13 padding-bottom:100%;14 height: 0;15 background:#ccc;16 width: 50%;17 position: relative;18 } 19 .square3-2{20 padding-top:100%;21 height: 0;22 background:#ccc;23 width: 50%;24 position: relative;25 } 26 .con{27 position: absolute;28 width: 100%;29 height: 100%; 30 } 31 </style>
运行之后我们发现写padding-top还是不可以,我们来检查代码发现,在写内层的div时候没有给top,left的值,让我们把top,left加上再看看
1 <style>2 .con{3 position: absolute;4 width: 100%;5 height: 100%; 6 top:0;7 left:0; 8 }9 </style>
4.利用子元素将父元素撑起来,利用margin-top,但是要注意margin塌陷的问题
父元素:
1 .container{2 overflow:hidden;//触发BFC解决margin问题3 width:100%;4 }5 .container:after{6 content:"";7 margin-top:100%;8 display:block; //块级元素才可以有垂直方向上的margin9 }