面试题19：CSS实现自适应正方形

面试官：请说一下如何实现自适应正方形

纯CSS实现自适应正方形的几种方式

在写页面布局时候正方形对我们来说应该很常见，比如商品列表展示，头像展示， 在微博上发布图片的展现等

方法一：

原理同padding，也是利用了vw是相对宽度，不过要注意是相对视窗宽度哦

CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位，1vw = 1% viewport width， vh 是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin 是相对当前视口宽高中 较小 的一个的百分比单位，同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。

利用.CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width

    
    
    
    
    


    
hello,viewport

效果图：

实现效果

优点：简洁方便
缺点：浏览器兼容不好

方法二：

在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：

设置垂直方向的padding撑开容器(padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width）

    
    
    
    
    


    
11

这种方案简洁明了，且兼容性好；但是除了填充内容后会出现问题以外，还有可能碰上 max-height 不收缩：DEMO，于是第三种方案来了：

max-height

*那么height设置百分比的高度又是怎么计算的呢？**当给一个元素的高度设置成%，如height:10%，那么他的高度为父元素的高度*10%，所以要给一个元素设置%的高度，他的父元素就必须有一个明确的高度，如果父元素没有确定高度，那么子元素的高度也会无从计算

//html

        
第一行内容
        
第二行内容
        
第三行内容
        
第四行内容
    
    
 //css
  .box{
            border:1px solid black ;
        }
        .item1{
            background-color: red;
            height: 10%;
        }
        .item2{
            background-color: yellow;
            height: 20%;
        }
        .item3{
            background-color: green;
            height: 30%;
        }
        .item4{
            background-color: blue;
            height: 40%;
        }

可以看到虽然给每个div设置了不一样的百分比高度，但是并没有达到想象中的效果，如果我们给父元素box设置一个高度，效果立马就出来了 

 .box{
            border:1px solid black ;
            height: 200px;
        }

 

方法三：

利用伪元素的 margin(padding)-top 撑开容器

在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效：

而失效的原因是 max-height 属性只限制于 height，也就是只会对元素的 content height 起作用。那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？我们来试试：

    
    
    
    
    


    

        

            hello!