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;:相对于视口宽度,适用于需要占据整个视口宽度的情况。
相关推荐
百锦再16 小时前
React编程高级主题:错误处理(Error Handling)
前端·javascript·react.js·前端框架·vue·web·angular
跟着珅聪学java2 天前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
杉之2 天前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
剑亦未配妥3 天前
Vue2函数式组件实战:手写可调用的动态组件,适用于toast轻提示、tip提示、dialog弹窗等
前端·vue.js·vue
wuaro3 天前
RBAC权限控制具体实现
前端·javascript·vue
前端互助会5 天前
AILabel标注工具指南(二):禁止图片外标注
vue·ailabel
YiHanXii6 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生6 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎7 天前
Vue3当中el-tree树形控件使用
vue