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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Jmeter面试题_软件测试的面试题及答案

    Jmeter面试题_软件测试的面试题及答案Jmter性能测试面试题

    2022年9月30日
  • Elasticsearch索引迁移的四种方式

    Elasticsearch索引迁移的四种方式本文主要讲解Elasticsearch下实现索引迁移的几种方式。0、引言将ES中的索引拷贝到其他ES中,或者将ES整体迁移,研究发现有两个开源的工具:elaticserch-dump和Elasticsearch-Exporter。除此之外,logstash在索引同步、迁移方面的作用也很大。两工具及logstash实现迁移的介绍、安装、使用、验证效果等展示如下:1、el…

    2022年5月29日
  • SQL Server内存

    SQL Server内存

    2021年11月28日
  • 数据时代大数据管理,主要有哪些策略?「建议收藏」

    数据时代大数据管理,主要有哪些策略?「建议收藏」1.对大数据时代的大数据管理框架进行创新在大数据时代的大数据管理形式不断发展过程中,给企业发展带来冲击非常巨大。因此,企业要根据我国信息技术不断发展的形式,对大数据管理框架进行全面的设计和创新,如图1所示。在大数据的处理的过程中,主要是围绕着数据资产进行管理的,同时对大数据时代的大数据管理制度,进行全面的规划行、设计、创新,这样对其它信息技术管理领域,提供了便利的条件。其实,大数据时代的大数据管…

    2022年6月10日
  • c# 操作ad域用户

    c# 操作ad域用户测试环境:win2008r2服务器ad域服务器安装参考:https://www.cnblogs.com/cnjavahome/p/9029665.html密码策略修改参考:https://blog.csdn.net/zouyujie1127/article/details/40857675工作机dns设置为ad域服务器的ipusing:usingSystem.DirectoryServ…

    2022年5月16日
  • Java判断平年闰年

    Java判断平年闰年定义:非整百年份除以4,整百年份除以400,如果不能被整除的是平年,可以被整除的就是闰年。

    2022年7月17日

发表回复

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

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