css3新发现height:100vh;

css3新发现height:100vh;vh/vwvh:相对于视窗的高度,视窗被均分为100单位的vh;vw:相对于视窗的宽度,视窗被均分为100单位的vw;vmax:相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin:相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小,即window.innerWidth/…

大家好,又见面了,我是你们的朋友全栈君。

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

vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax; 
vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin; 
视区所指为浏览器内部的可视区域大小, 
window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

calc 
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc是 css3提供的一个在css文件中计算值的函数:

  • 用于动态计算长度值。
  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% – 10px);
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 “+”, “-“, “*”, “/” 运算;
  • calc()函数使用标准的数学运算优先级规则;
calc(100vh - 10px)  表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px)   表示整个浏览器窗口宽度减去10px的大小
  • 1
  • 2

一般用来设置流式布局宽高,当然,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值

calc()的兼容性如下,使用时需注意:

这里写图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/132542.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 移动硬盘提示格式化解决的方法,未正确删除导致不能读取文件提示格式化解决方式

    移动硬盘提示格式化解决的方法,未正确删除导致不能读取文件提示格式化解决方式

    2021年12月14日
    58
  • java反射原理_java反射原理是什么?java反射机制原理详解

    java反射原理_java反射原理是什么?java反射机制原理详解前面给大家介绍了一下什么是 java 反射机制 那么下面要给大家介绍的就是 java 反射机制的原理 那么它的原理究竟是怎样的呢 下面就通过下面来做一下详细的了解吧 首先我们再来介绍一下 java 反射机制 java 反射机制就是 java 程序在运行的时候动态的创建类并调用类的方法以及属性 下面就来介绍一下原理 一 java 反射机制原理下面是我们经常可以见到的反射例子 Class gt clz Class

    2025年10月25日
    4
  • 矩阵分析:向量范数,矩阵范数,范数应用[通俗易懂]

    矩阵分析:向量范数,矩阵范数,范数应用[通俗易懂]1,向量范数1.1,向量范数的定义和例子设是复数域上的维向量空间,称函数为向量范数,是指对所有,有下列性质:(1)非负性:,并且当且仅当。(2)齐次性:对任何,。(3)三角不等式:若对任意,有:(1)(2)(3)证明(3):根据三角不等式,有:两式分别相减可得:设,则下列实值函数都是上的向量范数:(1)2范数:(2)1范数:(3)范数:(4)p范数:,当时,分别得到向量1范数和2范数,并且可以证明…

    2022年9月19日
    3
  • MySQL数据库应用与开发答案_MySQL数据库应用与开发习题解答与上机指导

    MySQL数据库应用与开发答案_MySQL数据库应用与开发习题解答与上机指导目录第 1 部分 MySQL 数据库应用与开发 习题参考答案第 1 章 MySQL 数据库概述 1 1 教学要求 1 1 1 基本要求 1 1 2 重点与难点 1 2 习题参考答案第 2 章 MySQL 语言基础 2 1 教学要求 2 1 1 基本要求 2 1 2 重点与难点 2 2 习题参考答案第 3 章 MySQL 数据库的基本操作 3 1 教学要求 3 1 1 基本要求 3 1 2 重点与难点 3 2 习题参考答案第 4 章表及数据完整性 4 1 教学要求 4 1 1 基本要求 4

    2025年6月26日
    3
  • JSP程序设计作业

    JSP程序设计作业JSP页面由哪几种主要元素组成?四种元素:普通的HTML标记JSP注释JAVA脚本元素,包括声明、JAVA程序片和JAVA表达式​JSP标记,如指令标记,动作标记和自定义标记。如果有3个用户访问一个JSP页面,该页面中的Java程序片将被执行几次?三次<%!和%>之间声明的变量与<%和%>之间声明的变量有何不同?<%!和%>之间声明的变量在整个JSP页面内都有效,称为JSP页面的成员变量,成员变量的有效范围与标记符号<%!,%…

    2022年6月25日
    30
  • 在非Activity中使用startActivityForResult

    在非Activity中使用startActivityForResult在开发过程中有时会有需要在非activity中,跳转到另一个activity中,再携带某些值回到先前的页面,我们在很多地方可以拿到context,但这个时候想使用startActivityForResult时却发现无法调用,因为这个方法是Activity下的,而非Context下,这个时候只需要强转一下即可,将获取到的context转成activity就可以使用这个方法了,在我的…

    2022年7月27日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号