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;:相对于视口宽度,适用于需要占据整个视口宽度的情况。
相关推荐
fcm1914 小时前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸14 小时前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享1 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理
邂逅星河浪漫2 天前
【Spring AI】Ollama大模型-智能对话实现+项目实战(Spring Boot + Vue)
java·人工智能·spring boot·vue·prompt·agent·ollama
知识分享小能手2 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react
中杯可乐多加冰2 天前
高校迎新管理系统:基于 smardaten AI + 无代码开发实践
人工智能·低代码·语言模型·llm·vue·管理系统·无代码
这是个栗子3 天前
(二)Vue.js 指令、事件与计算属性
前端·javascript·vue
蜚鸣11 天前
Vue的快速入门
vue
吃饭最爱12 天前
⽹络请求Axios的概念和作用
vue
魂尾ac12 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue