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

The..Fuir

已于 2022-04-24 21:34:25 修改

阅读量1.5k

点赞数

分类专栏：面试 html css 文章标签： css html

于 2022-04-24 21:24:59 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/124391133

版权

面试同时被 3 个专栏收录

152 篇文章 50 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

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

纯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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* //第一种 */
        .square {
        width: 50%;
        height: 50vw;
        background: #ccc;
  }
    </style>
</head>
<body>
    <div class="square">hello,viewport</div>
</body>
</html>
效果图：

实现效果

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

方法二：

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

设置垂直方向的padding撑开容器(padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* //第一种 */
       /*  .square {
        width: 50%;
        height: 50vw;
        background: #ccc; 
         }*/

         /* 第二种 */
        .square{ 
            width: 50%;
            padding-bottom:50%; /* padding百分比相对父元素宽度计算 */
            height:0;//避免被内容撑开多余的高度
            background: #ccc; 
        }
  
    </style>
</head>
<body>
    <div class="square">11</div>
</body>
</html>
这种方案简洁明了，且兼容性好；但是除了填充内容后会出现问题以外，还有可能碰上 max-height 不收缩：DEMO，于是第三种方案来了：

max-height

*那么height设置百分比的高度又是怎么计算的呢？**当给一个元素的高度设置成%，如height:10%，那么他的高度为父元素的高度*10%，所以要给一个元素设置%的高度，他的父元素就必须有一个明确的高度，如果父元素没有确定高度，那么子元素的高度也会无从计算
//html
<div class="box">
        <div class="item1">第一行内容</div>
        <div class="item2">第二行内容</div>
        <div class="item3">第三行内容</div>
        <div class="item4">第四行内容</div>
    </div>
    
 //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 属性生效呢？我们来试试：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* //第一种 */
       /*  .square {
        width: 50%;
        height: 50vw;
        background: #ccc; 
         }*/

         /* 第二种 */
        /* .square{ 
            width: 50%;
            padding-bottom:50%; 
            height:0;
            background: #ccc; 
        } */
  
        /* //第三种 */
        .square{
            width: 50%;
            overflow: hidden;/*是为了防止margin塌陷,触发BFC*/
            background: yellow;
        }
        .square:after {
            content:'';
            display: block;
            padding-top: 100%;
        }
        .content {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="square">
        <div class="content">
            hello!
        </div>
    </div>
</body>
</html>