文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用vh和vw单元时CSS位置绝对失败

使用vh和vw单位时，CSS位置绝对失败是因为vh和vw单位是相对于视口大小的单位，而不是相对于父元素或其他元素的单位。因此，在某些情况下，使用vh和vw单位可能会导致位置计算不准确或不符合预期。

具体来说，vh单位表示视口高度的百分比，vw单位表示视口宽度的百分比。例如，1vh等于视口高度的1%，1vw等于视口宽度的1%。这些单位可以用于设置元素的宽度、高度、字体大小等属性。

然而，当使用vh和vw单位来设置元素的位置时，可能会遇到以下问题：

  1. 相对于视口大小：vh和vw单位是相对于视口大小的，而不是相对于父元素或其他元素的。因此，如果父元素的大小发生变化，或者元素嵌套在其他元素中，使用vh和vw单位设置的位置可能会出现偏移或错位。
  2. 不适用于动态布局：由于vh和vw单位是相对于视口大小的，因此在动态布局中使用它们可能会导致布局的不稳定性。当视口大小改变时，元素的位置可能会发生变化，从而影响页面的布局。
  3. 兼容性问题：虽然vh和vw单位在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持或支持不完全。因此，在使用vh和vw单位时，需要考虑浏览器的兼容性问题。

综上所述，虽然vh和vw单位在某些情况下可以方便地设置元素的宽度、高度等属性，但在设置元素的位置时可能会出现问题。为了避免这些问题，可以考虑使用其他更稳定和可靠的单位，如像素(px)、百分比(%)或rem单位。

腾讯云相关产品和产品介绍链接地址：

  • 腾讯云官网：https://cloud.tencent.com/
  • 云服务器（CVM）：https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
  • 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
  • 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
  • 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
  • 云存储（COS）：https://cloud.tencent.com/product/cos
  • 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关搜索:css vh和vw，为什么大众的值在改变方向时不会改变？CSS使用vw和左侧位置计算最大宽度CSS边框动画占用表格内的空间，使用绝对位置时的粗糙动画div具有固定位置和css属性“动画”，当我动态添加类时，它不会使用"transform: translateY(0%)“属性进行动画处理。SQL conn在使用POST和header(位置)进行评级时失败在CSS中可以同时使用vw和vh吗？在使用CSS Flex行和表格/表格单元格时遇到一些问题如何在React原生中使用css位置绝对和伸缩结束嵌入式linux移植嵌入linux到芯片
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

如何决定响应式网站的 CSS 单位？

在我们创建适合各种设备的响应式网站时，了解正确的CSS 单位很重要。不过在深入研究决策之前，让我们先对它们进行分类以便了解它们的用途。 如何决定响应式网站的 CSS 单位？...- 根 em 相对于查看端口/文档 vw vh vmax vmin 在这里学习最常见的单位 px 单位 绝对像素单位仅用于屏幕（界面），其余单位用于打印。...，因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。...em 单位相对于元素字体大小的边距和填充 。 rem 单位相对于根的字体大小 。 vw 和 vh 表示相对于根的宽度和高度。...这些是 6 个 css 单元，它们最常用于使网站具有响应性。 我已经写了很长一段时间的技术博客，并且主要通过CSDN发表，这是我的一篇 响应式网站的 CSS 单位教程。我喜欢通过文章分享技术与快乐。

94510

移动端自适应的常见手段

CSS Grid 可划分为行和列进行布局。如果只需要按照行或列进行布局则使用 Flexbox；如果需要同时按照行和列控制布局则使用 CSS Grid。...Flex Item 根据其内部内容和可用空间进行增长和缩小。CSS Grid 专注于精确的内容布局结构规则。每个 Grid Item 都是一个网格单元，沿水平轴和垂直轴排列。...如果允许内容灵活的分配空间则使用 Flexbox；如果需要准确控制布局中项目的位置则使用 CSS Grid。 image 4....由于早期 vw、vh 兼容性不佳，一个使用广泛的移动端适配方案 flexible 是借助 rem 来模拟 vw 特性实现移动端适配。在设计与开发时，通常会约定某一种尺寸为开发基准。...vw/vh 由于目前 vw、vh 相关单位获得了更多浏览器的支持，可以直接使用 vw、vh 单位进行移动端开发。

1.8K00

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。 长度单位可分为两种类型：相对和绝对。...绝对长度 绝对长度单位是一个固定的值，反应真实的物理尺寸，不依赖于显示器、分辨率、操作系统等。...em：相对于当前元素的字体大小来计算值，一般浏览器字体大小默认为16px，则2em = 32px rem：rem是根em(root em)的缩写，rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时...vw：vw(viewpoint width)视窗宽度，1vw = 视窗宽度的1% vh：vh(viewpoint height)视窗高度，1vh = 视窗高度的1% vmin：vw和vh中较小的那个。...vmax：vw和vh中较大的那个。 一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

40610

【面试题】CSS知识点整理(附答案)

:hidden的区别 em rem vh vw calc() line-height 百分比 rem实现原理及相应的计算方案 清除浮动方法及原理 postcss是什么 css modules CSS预处理器...图片来源网络 CSS3 规范中的要求使用双冒号 (::) 表示伪元素，以此来区分伪元素和伪类，比如::before 和::after 等伪元素使用双冒号 (::)，:hover 和:active 等伪类使用单冒号...和vh vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。...vmin：取当前vw和Vh中较小的那一个值， vmax：取当前Vw和Vh中较大的那一个值 vw、vh 与 % 百分比的区别： % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。...” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"width: calc(12%+5em)"这种没有空格的写法是错误的

1.5K40

CSS 你到底有多少长度单位？

听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈 都 9102 年了，移动端 em 和 rem 霸占天下，总会有人问你两者的区别；vw 和 vh 也展露头角，拥护者与日俱增...它们的兼容性如下 视口比例单位 vh、vw、vmin、vmax 在 css3 中新增了和 Viewport 相关的四个单位，随着时间推移，目前各浏览器环境也能跟上了，这也是当前/未来最建议的在伸缩方案中用的单位...1vw 表示视口宽度的 1/100 1vh 表示视口高度的 1/100 1vmin 取 1vm 和 1vh 较小的一者 1vmax 取 1vm 和 1vh 较大的一者 ！...视口宽高对应 window.innerWdith 和 window.innerHeight 而当前的兼容性如下： CSS3 其他新特性的搭配使用 从几个案例来研究下 1....px 我们称之为像素，即屏幕图形显示的一个点（最小单位），这个点有它的位置、颜色等信息，从这个意义上来说 px 是绝对单位；但每一屏幕上的最小单位1像素对应物理单位是可以变化的，比如1px=1mm、1px

43120

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。 长度单位可分为两种类型：相对和绝对。...绝对长度 绝对长度单位是一个固定的值，反应真实的物理尺寸，不依赖于显示器、分辨率、操作系统等。...em：相对于当前元素的字体大小来计算值，一般浏览器字体大小默认为16px，则2em = 32px rem：rem是根em(root em)的缩写，rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时...vw：vw(viewpoint width)视窗宽度，1vw = 视窗宽度的1% vh：vh(viewpoint height)视窗高度，1vh = 视窗高度的1% vmin：vw和vh中较小的那个。...vmax：vw和vh中较大的那个。 一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

38120

CSS Viewport 单位，很多人还不知道使用它来快速布局！

简介 根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...我们有一个元素与以下CSS: .element { height: 50vh; } 当视口高度为290px时，70vh计算如下: height = 290*70% = 202px 大家都说简历没项目写...通过使用CSS网格和视口单位，我们可以使其完全动态的响应式。...Vmin 和 Vmax 用例 该用例是关于页面标题元素的顶部和底部padding 。 当视口较小（移动）时，通常会减少padding 。

3.2K30

一文读懂 CSS 单位

常见的视窗相对单位有vw、vh、vmax、vmin。 下面就来看看这些常见的CSS单位。 （1）em 和 rem em是最常见的相对长度单位，适合基于特定的字号进行排版。...由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位。...这四个单位指的是： vw：视窗宽度的百分比； vh：视窗高度的百分比； vmax：较大的 vh 和 vw； vmin：较小的 vh 和 vw。...假如一个浏览器的高度是800px，那么1vh的值就是8px。vh和vw的大小总是和视窗的高度和宽度有关。 vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。...（3）定位中的百分比 在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作为单位。其参照物就是包含块的同方向的width和height。

70010

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

我们用其中一个颜色举例，例如 red 5%，表示这个红色在整个颜色范围的 5% 时停止纯色范围，开始进行渐变，这个范围指的是从初始位置开始到结束方向的百分比范围，例如如图： 图片 在这里的 red...class="gradient-to-down"> 二、 径向渐变 2.1 径向渐变 径向渐变我们可以看成是一个点（圆）的建表，通过定义这个点的位置和渐变形状...我们还可以对渐变边缘进行控制，例如在一般渐变时，咱们的边缘是这样的： 图片 这是因为最后的渐变色为一个颜色，若我们使用最后一个颜色为透明色那么即可使当前的渐变产生一种发散效果，这个时候就得使用...三、渐变色实战 案例如下： 3.1 背景移动 背景移动使用 background-position 属性，当我们使用渐变色作为背景时，需要移动渐变色才能时背景发生改变。..."> 此时我们可以看到，设置了一个渐变色，使用了 closest-side ，在大小设置为 130vw 130vh（vw和vh是视窗大小），background-position

4.8K10

pt、rpx、px、em、rem、%、vh、vw的区别

前端有很多尺寸单位，比如: pt、rpx、px、em、rem、%、vh、vw等，我们需要深入了解它们的工作原理和使用情况。...px是绝对单位，其尺寸在不同设备上保持不变，这意味着1px在高密度屏幕和低密度屏幕上看起来不同。px通常用于精确控制图像的大小和布局，特别是在需要保持一致性的设计中。...百分比常用于调整尺寸、布局和位置，特别是在创建自适应和响应式设计时非常有用。5. vh（视口高度）和vw（视口宽度）：vh和vw是相对于视口的高度和宽度的单位。...1vh等于视口高度的1%，1vw等于视口宽度的1%。这些单位非常适合响应式设计，因为它们让元素根据屏幕大小自动调整大小。6. pt（点）：pt是用于印刷和排版的单位，等于1/72英寸。...在选择单位时，要考虑到设计的目标和需要。相对单位通常更适合响应式和可扩展性的设计，而绝对单位适用于需要固定尺寸和位置的元素。根据具体情况选择合适的单位有助于确保设计在不同设备上呈现一致。

84730

54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

vw： 相对于视窗的宽度，视窗宽度是 100vw； vh： 相对于视窗的高度，视窗高度是 100vh； vmin： vw 和 vh 中的较小值； vmax： vw 和 vh 中的较大值； vw 和百分比的区别是...: vw 相对于视窗, % 相对于父元素 19、CSS优化和提高性能的方法？...减少使用 @import，建议使用 link，因为 link 在页面加载时一起加载，import 是页面加载完成之后再加载。...属性值为 0 时，不加单位。 不使用 @import 前缀，它会影响 css 的加载速度。 可维护性： 抽离 css, 提高可复用性。 样式与内容分离, 提高可维护性。...元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮都是用的fixed固定定位 sticky 粘性定位，基于用户的滚动位置来定位。

1.2K10

【说站】css样式单位px，em，pt，ex，pc，in，mm，cm详解

其实css中的长度单位有px、em、pt、in、ex、pc、mm、cm、ch、rem、vw、vh、vmin、vmax。下面品自行将对这些css样式的长度单位做详细说明。...相对于当前字体的 x-height(极少使用) 5、pc：派卡(Pica)，绝对长度单位。相当于我国新四号铅字的尺寸。1pc = 12 pt 6、in：英寸(Inch)，绝对长度单位。...相对于根元素的字体大小（font-size）； 11、vw：相对长度单位。相对于视口*宽度的 1%； 12、vh：相对长度单位。相对于视口*高度的 1%； 13、vmin：相对长度单位。...相对于视口*较小尺寸的 1％ ，vw和vh中较小的那个； 14、vmax：相对长度单位。相对于视口*较大尺寸的 1％，vw和vh中较大的那个；  视口（Viewport）= 浏览器窗口的尺寸。...有两种类型的长度单位：相对和绝对。 收藏 | 0点赞 | 0打赏

2.3K21

探讨移动端适配

在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。...通过查看视口的大小就可以得出 CSS像素与物理像素的比值关系 如上图视口宽度为 1280 而我们的分辨率，物理像素也是 1280 此时在浏览器窗口未发生改变和缩放时，CSS像素与物理像素的比值是...当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。...预处理+媒体查询与rem+flexible.js做网页适配 vw，vh 1.vw：1vw等于视口宽度的1% 2.vh：1vh等于视口高度的1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为...375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度 开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标注是基于此宽度标注） 开始开发

1.3K10

移动适配的长度单位

扩充了css语言，使css具备一定的逻辑性和计算能力。 注意：浏览器不识别less代码，目前阶段，网页需要引入的还是对应的css文件。...注：&表示当前选择器，不生成后代选择器，通常配合伪类或伪元素使用。 变量：存储数据，方便使用和修改。...相对视口的尺寸计算结果： vw：viewport width 1vw = 1/100视口宽度 vh：viewport height 1vh = 1/100视口高度 尺寸确定 确定设计稿对应的 vw尺寸（...单位的尺寸=px单位数值/（1/100视口宽度） 注：在开发中，vw和 vh不会混用，因为 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。...---- rem是目前多数企业在用的解决方案，但需要不断修改html文字大小，需要媒体查询media，需要flexible.js，而vw/vh是未来的解决方案，省去各种判断和修改。

1.2K20

CSS中常见的长度单位

1.CSS中常见的长度单位 名称 英文全称 中文名 相对/绝对长度 换算 描述 % percentage 百分比 相对 原长度*百分数 px pixel 像素...（2）CSS中设置字体大小（font-size）请尽量使用em或者ex代替px，原因是用px做描述字体大小唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。 2....CSS3中新增的度量单位 （1）ch——字符0(零)的宽度； （2）rem——根元素(html元素)的em； （3）vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；...（4）vh——viewpoint height，视窗高度，1vh等于视窗高度的1%； （5）vmin——vw和vh中较小的那个。...vw、vh、vmin，浏览器支持并不乐观，IE9支持了，Chrome、Safari、Opera和Firefox还都不支持。

1.2K20

百度前端二面高频面试题合集

，rem，vw/vh。...（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...vw：相对于视窗的宽度，视窗宽度是100vw；vh：相对于视窗的高度，视窗高度是100vh；vmin：vw和vh中的较小值；vmax：vw和vh中的较大值；vw/vh 和百分比很类似，两者的区别：百分比...我们在什么场景下会使用 PostCss？ 它和预处理器的不同就在于，预处理器处理的是 类CSS，而 PostCss 处理的就是 CSS 本身。...PostCss 在业务中的使用场景非常多：提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer

94230

不可思议的纯 CSS 实现鼠标跟随效果

要监测到当前鼠标处于何处，我们只需要在页面上铺满元素即可： 我们使用 100 个元素，将整个页面铺满，hover 的时，展示颜色，核心 SCSS 代码如下： <div class="g-container...; height: 100<em>vh</em>; } .position { position: absolute; width: 10<em>vw</em>; height: 10<em>vh</em>; } @for...仅仅<em>使用</em> <em>CSS</em>，还是有诸多限制。...但是我们还是可以<em>使用</em>上述介绍的方法实现鼠标跟随 利用 <em>CSS</em> 滤镜 filter: blur() contrast() 模拟元素融合，具体可以看看这篇文章：你所不知道的 <em>CSS</em> 滤镜技巧与细节 好，看看仅仅<em>使用</em>...<em>使用</em> div 铺满页面捕捉元素当前<em>位置</em>的技巧，还可以运用在其他一些效果上，譬如指示出鼠标运动轨迹： ?

4.5K10

CSS单位总结

CSS 中的哪些单位首先，在 CSS 中，单位分为两大类，绝对长度单位和相对长度单位。绝对长度单位我们先来说这个，绝对长度单位最好理解，和我们现实生活中是一样的。...常见的绝对单位长度如下：这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个经常使用的值，估计就是 px(像素)。...上面的单位中，常用的有 em、rem、vw、vh，其中 vw 和 vh 代表的是视口的宽度和高度，例如：*{ margin: 0; padding...: 0;}.container { width: 50vw; height: 100vh; background-color: pink;}在上面的代码中，我们设置了容器的宽度为 50vw，也就是占视口的一半...，而高度我们设置的是 100vh，就是占满整个视图。

5810
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券