CSS实现自适应正方形、等宽高比矩形

1.利用vw、vh、vmin、vmax，vw表示的是viewport的宽度，也就是视口的宽度，vh表示的是视口的高度，vmin=min{vw,vh}取的是两者中较小的值，vmax ={vw,vh}，1vm = 1% viewport width其他同理，所以利用上诉的单位来定义矩形的宽高即可实现等比变换。

div{
  width :1vm;
  height:1vm;
}

2.利用垂直方向上的padding值，当容器中的内容超过了容器的宽高时，容器的内容会扩充到padding中，同时padding，margin如果设置为百分比，则均是相对于父级元素的宽度而言的，所以即可以使用如下方式宽高1:1，同理可以设置其他的比例，在这里需要注意一下，如果不写hegith的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度。 如果将padding-bottom换成padding-top，在正方形中有内容的时候，内容会在正方形外面，这是因为默认文字是从左到右，从上到下的排列所以paddin-top以后文字会在正方形外面

div{
   height:0px;
   width:100%;
   padding-bottom/top:100%;
}

3.利用双层嵌套来写，将外层的div的position设置relative，内层的position设置为absoult，利用绝对定位消除空间占用 ，分别看设置成padding-top／padding-bottom的效果

<div class="square3">
    <div class="con">
        内容
    </div>
</div> 
<div class="square3-2">
    <div class="con">
        内容
    </div>
</div> 
<style>
.square3{
    padding-bottom:100%;
    height: 0;
    background:#ccc;
    width: 50%;
    position: relative;
} 
.square3-2{
    padding-top:100%;
    height: 0;
    background:#ccc;
    width: 50%;
    position: relative;
}  
.con{
    position: absolute;
    width: 100%;
    height: 100%; 
} 
</style>

运行之后我们发现写padding-top还是不可以，我们来检查代码发现，在写内层的div时候没有给top，left的值，让我们把top，left加上再看看<style>

.con{
    position: absolute;
    width: 100%;
    height: 100%; 
    top:0;
    left:0; 
}
</style>

4.利用子元素将父元素撑起来，利用margin-top，但是要注意margin塌陷的问题 
父元素：

.container{
  overflow:hidden;//触发BFC解决margin问题
  width:100%;
}
.container:after{
  content:"";
  margin-top:100%;
  display:block; //块级元素才可以有垂直方向上的margin
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2104