返回顶部
首页 > 资讯 > 前端开发 > node.js >css中100vh指的是什么
  • 735
分享到

css中100vh指的是什么

2024-04-02 19:04:59 735人浏览 安东尼
摘要

本篇内容介绍了“CSS中100vh指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

本篇内容介绍了“CSS中100vh指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

在css中,“100vh”是指大小为“100”单位为“vh”的一个相对长度值;“vh”是css中的一个相对长度单位,是相对于视窗的高度,“100vh”就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小。

教程操作环境:windows10系统、css3&&HTML5版本、Dell G3电脑。

css中100vh是什么

vh是css中的一个相对长度单位,相对于视窗的高度, 视窗被均分为100单位的vh,即1vh永远等于当前视窗高度的百分之一。

视窗被均分为100单位的vh。vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的。

视区所指为浏览器内部的可视区域大小, 即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

因此,100vh就等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小。

设置height:100vh,不论元素没有内容,该元素都会被撑开与屏幕高度一致

扩展知识:

  • vh: 相对于视窗的高度, 视窗被均分为100单位的vh;

  • vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

  • vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

  • vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

“css中100vh指的是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: css中100vh指的是什么

本文链接: https://lsjlt.com/news/98116.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css中100vh指的是什么
    本篇内容介绍了“css中100vh指的是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • 不应该依赖CSS 100vh的原因是什么
    今天小编给大家分享一下不应该依赖CSS 100vh的原因是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们...
    99+
    2024-04-02
  • css中:empty指的是什么
    这篇文章给大家分享的是有关css中:empty指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   :empty是一个css的伪类选择器,用于选择页面中为空的元素。 ...
    99+
    2024-04-02
  • css中vw指的是什么
    这篇文章主要介绍了css中vw指的是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css中vw指的是什么文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • css中height指的是什么
    这篇“css中height指的是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css中...
    99+
    2024-04-02
  • css中margin:auto指的是什么
    本篇内容主要讲解“css中margin:auto指的是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css中margin:auto指的是什么”吧!   首...
    99+
    2024-04-02
  • CSS指的是什么
    CSS是对html的补充,可以使网页形式和内容分离,css是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言,它扩充了 HTML各标记的属性设定,使网页内容的视觉效果有更多变化,有助于实现负责任的Web设计。...
    99+
    2024-04-02
  • css中行高指的是什么
    小编给大家分享一下css中行高指的是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构...
    99+
    2023-06-14
  • css中注释指的是什么
    这篇文章主要介绍了css中注释指的是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css的注释是以“斜杠+星号()”结束;css的注释字符均为英文半角小写,并且“*”符号...
    99+
    2023-06-14
  • css中浮动指的是什么
    这篇文章主要介绍css中浮动指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在css中,浮动是一种使元素脱离文档流的方法,会使元素根据float的值向左或向右移动,其周围的元素也会重新排列,直到它的外边缘碰到...
    99+
    2023-06-14
  • css中冲突指的是什么
    这篇文章主要介绍了css中冲突指的是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css的冲突是指当多个CSS样式应用到同一个元素时,这些样式之间可能存在对同一个属性的不...
    99+
    2023-06-14
  • css中伪类指的是什么
    这篇文章主要介绍css中伪类指的是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css伪类是用于定义元素的特殊状态,它可以用于:1、设置鼠标悬停在元素上时的样式;2、为已访问和未访问链接设置不同的样式;3、设置元...
    99+
    2023-06-15
  • html/css中tt指的是什么
    这篇“html/css中tt指的是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“html/css中tt指的是什么”文章吧...
    99+
    2023-07-05
  • css reset指的是什么
    这篇文章给大家分享的是有关css reset指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。# tmall 天猫商城 body,h2,h3,h4,h...
    99+
    2024-04-02
  • div+css指的是什么
    小编给大家分享一下div+css指的是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!div是框架,css是样式,用来装饰框架;详细点来说,div就是给整个网页...
    99+
    2023-06-14
  • css中tr指的是什么意思
    小编给大家分享一下css中tr指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在css...
    99+
    2024-04-02
  • css中url指的是什么意思?
    这篇文章主要介绍了css中url指的是什么意思?,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   CSS是层叠样式表(英文全称:Casc...
    99+
    2024-04-02
  • css中伪对象指的是什么
    本篇内容主要讲解“css中伪对象指的是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css中伪对象指的是什么”吧! 在css中,...
    99+
    2024-04-02
  • css中inline指的是什么意思
    这篇文章给大家分享的是有关css中inline指的是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css中inline是什么意思在css中,inline属性值与displ...
    99+
    2024-04-02
  • css中less指的是什么意思
    小编给大家分享一下css中less指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在c...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作