CSS中calc单位vw和%的区别

最新推荐文章于 2024-02-21 11:23:31 发布

enter键上的妹妹

最新推荐文章于 2024-02-21 11:23:31 发布

阅读量999

点赞数

本文链接：https://blog.csdn.net/m0_47883103/article/details/108010758

版权

直接上代码

先看单位为%百分号的时候

.box{
    float: left;
  }
  .a{
    overflow: hidden; 
    width: calc(100% - 100px);  // 看这里
    height:500px; 
  }

<div class="box" style="width: 100px; height:100px; background-color:red;"></div>
<div class="a" style="background-color:aqua;"></div>

运行效果如下
在这里插入图片描述
可以看到红色的box盒子在左边，蓝色的a盒子在右边，刚好是我想要的

再看看单位为vw

.box{
    float: left;
  }
  .a{
    overflow: hidden; 
    width: calc(100vw - 100px);  // 看这里
    height:500px; 
  }

<div class="box" style="width: 100px; height:100px; background-color:red;"></div>
<div class="a" style="background-color:aqua;"></div>