css3中的width:100vh以及calc(100vh + 10px)

css3中的width:100vh以及calc(100vh + 10px)vh/vwvh:相对于视窗的高度,视窗被均分为100单位的vh;vw:相对于视窗的宽度,视窗被均分为100单位的vw;vmax:相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin:相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。calccalc是英

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

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的大小

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

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

这里写图片描述:
在这里插入图片描述

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130865.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • redis一级缓存和二级缓存_面试官让面试者先回去

    redis一级缓存和二级缓存_面试官让面试者先回去说起mybatis,大家可能都知道它是一个优秀的久层框架,它支持定制化SQL、存储过程以及高级映射。面试中都会问起mybatis一级缓存和二级缓存,它体现出你对mybatis这个开发中的理解,如果照着答案背的话只能拿到一个及格分,所以今天咱们就好好聊聊mybatis。另外本人整理了20年面试题大全,包含spring、并发、数据库、Redis、分布式、dubbo、JVM、微服务等方面总结,下图是部分截图,需要的话点这里点这里,暗号CSDN。1.首先,什么是Mybatis?MyBatis是一.

  • Kali Linux三种网络攻击方法总结(DDoS、CC和ARP欺骗)

    Kali Linux三种网络攻击方法总结(DDoS、CC和ARP欺骗)本文章使用的是KaliLinux的2020-4-installer-amd64版本KaliLinux的安装过程本文章不做过多说明,请自行百度一、DDos攻击首先,打开一个命令行输入以下命令:gitclonehttps://github.com/Ha3MrX/DDos-Attack提示如图所示这样,用于DDos的数据包就已经下载到了你的Kali上下面,进入你所下载的DDos文件夹,输入命令(注意大小写):cdDDos-Attack然后设置ddos-attack.py设置

  • IDEA 2020 3.3激活码_通用破解码

    IDEA 2020 3.3激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • visio的安装教程2019_anaconda安装教程

    visio的安装教程2019_anaconda安装教程Visio的安装教程  Visio使你能够将复杂的文本和表转换为很难理解的可视化图表,以便快速传达信息。有许多类型的Visio图表,包括组织结构图、网络图、工作流和家庭或office计划。Visio入门可以分为三个基本步骤:使用模板、排列和连接形状以及使用文本修改形状。教程矢量图:https://www.iconfont.cn/模板:https://huaban.c…

    2022年10月25日
  • format(format c)

    a-antemeridiemandpostmeridiemd-dayofmonth(noleadingzero)dd-dayofmonth(twodigit)o-dayofyear(noleadingzeros)oo-dayofyear(threedigit)D-daynameshortDD-…

  • 图像滤波边界处理方式(图像滤波算法)

    图像处理-双边滤波和联合双边滤波双边滤波原理​双边滤波(BilateralFilter)是一种非线性滤波器,可以达到保持边缘,降噪平滑的效果。其算法最早由C.Tomasi和R.Manduchi在论文《BilateralFilteringforGrayandColorImages》中提出,按照原文中的话说Itcombinesgraylevelsorcolorsbasedonboththeirgeometricclosenessandtheirphoto

发表回复

您的电子邮箱地址不会被公开。

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