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

相关推荐

  • 关于ADRC算法以及参数整定(调参)的一些心得体会

    关于ADRC算法以及参数整定(调参)的一些心得体会关于ADRC算法以及参数整定(调参)的一些心得体会ADRC,全称叫做ActiveDisturbanceRejectionControl,中文名是自抗扰控制技术。这项控制算法是由中科院的韩京清教授提出的。韩教授继承了经典PID控制器的精华,对被控对象的数学模型几乎没有任何要求,又在其基础上引入了基于现代控制理论的状态观测器技术,将抗干扰技术融入到了传统PID控制当中去,最终设计出了适合在工程…

    2022年5月20日
  • elementui滚动条美化_vue element ui文档

    elementui滚动条美化_vue element ui文档vueelement滚动条颜色更改

    2022年11月2日
  • 11种经典滤波算法「建议收藏」

    11种经典滤波算法「建议收藏」1、限幅滤波法(又称程序判断滤波法)  A、方法:      根据经验判断,确定两次采样允许的最大偏差值(设为A)      每次检测到新值时判断:      如果本次值与上次值之差<=A,则本次值有效      如果本次值与上次值之差>A,则本次值无效,放弃本次值,用上次值代替本次值  B、优点:      能有效克服因偶然因素引起的脉冲干扰…

    2022年5月3日
  • 基于python的个人博客系统的设计开题报告_基于SSM的个人博客系统设计开题报告…「建议收藏」

    基于python的个人博客系统的设计开题报告_基于SSM的个人博客系统设计开题报告…「建议收藏」本科毕业设计(论文)开题报告题目:基于SSM的个人博客系统设计与实现专题题目(若无专题则不填):本课题来源及研究现状:关于博客的未来:在创办了博客中国(blogchina)、被誉为“博客教父”的方兴东接受了记者的专访。他认为,博客这一事物在中国的发展大致经过以下三个阶段:第一阶段是2002年至2003年,少数人写博;第二阶段是2003年至2005年,博客爱好者写博;第三阶段是2…

    2022年7月21日
  • spring cloud 入门系列八:使用spring cloud sleuth整合zipkin进行服务链路追踪[通俗易懂]

    好久没有写博客了,主要是最近有些忙,今天忙里偷闲来一篇。我是华丽的分割线微服务架构是一种分布式架构,微服务系统按照业务划分服务单元,一个微服务往往会有很多个服务单元,一个请求往往会有很多个单元参与

    2022年2月16日
  • javaweb转发和重定向的区别_servlet转发和重定向

    javaweb转发和重定向的区别_servlet转发和重定向客户首先发送一个请求到服务器端,服务器端发现匹配的servlet,并指定它去执行,当这个servlet执行完之后,它要调用getRequestDispacther()方法,把请求转发给指定的student_list.jsp,整个流程都是在服务器端完成的,而且是在同一个请求里面完成的,因此servlet和jsp共享的是同一个request,在servlet里面放的所有东西,在student_list中都能取出来,因此,student_list能把结果getAttribute()出来,getAttribute(

    2022年9月7日

发表回复

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

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