width: 100%和 width: 100vw这两种写法有什么区别

width: 100%;width: 100vw; 是两种不同的 CSS 写法,它们在实际应用中会有不同的效果。以下是这两种写法的主要区别:

  1. width: 100%;

    • 定义:将元素的宽度设置为其包含块(通常是父元素)宽度的 100%。
    • 效果:元素会根据其包含块的宽度进行调整。如果包含块的宽度发生变化,元素的宽度也会相应变化。
    • 应用场景:适用于需要根据父元素宽度进行调整的元素,比如在响应式布局中,根据父容器的宽度来动态调整元素宽度。
  2. width: 100vw;

    • 定义:将元素的宽度设置为视口宽度(viewport width)的 100%。
    • 效果:元素的宽度等于浏览器窗口的宽度,不受父元素宽度的影响。如果浏览器窗口宽度发生变化,元素的宽度也会相应变化。
    • 应用场景:适用于需要占据整个视口宽度的元素,比如全屏背景图片或者横幅。

举例说明

假设浏览器窗口宽度为 1200px,包含块(父元素)宽度为 800px:

  • 使用 width: 100%;

    html 复制代码
    <div style="width: 800px;">
      <div style="width: 100%; background-color: lightblue;">
        这个 div 的宽度是 800px
      </div>
    </div>

    在这个例子中,内层 div 的宽度是父元素的 100%,即 800px。

  • 使用 width: 100vw;

    html 复制代码
    <div style="width: 800px;">
      <div style="width: 100vw; background-color: lightgreen;">
        这个 div 的宽度是 1200px
      </div>
    </div>

    在这个例子中,内层 div 的宽度是视口宽度的 100%,即 1200px。

总结

  • width: 100%;:相对于父元素宽度,适用于需要根据父元素宽度调整的情况。
  • width: 100vw;:相对于视口宽度,适用于需要占据整个视口宽度的情况。
相关推荐
全栈老李技术面试9 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
csj5010 小时前
前端基础之《Vue(11)—自定义指令》
前端·vue
jaywongX17 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
前端极客探险家1 天前
前端 Excel 工具组件实战:导入 → 可编辑表格 → 导出 + 样式同步 + 单元格合并
前端·typescript·vue·excel
有什么东东2 天前
山东大学软件学院创新项目实训开发日志(20)之中医知识问答自动生成对话标题bug修改
java·vue·bug·springboot
络72 天前
IDEA导入并启动若依项目步骤(SpringBoot+Vue3)
java·spring boot·mysql·vue·intellij-idea
脑瓜嗡3 天前
发送百度地图的定位
vue·php
巴啦啦臭魔仙4 天前
buildadmin 自定义单元格渲染
vue·php
小贺要学前端4 天前
前端如何优雅地对接后端
前端·性能优化·vue·前端优化