css中100vh 加减运算[通俗易懂]

css中100vh 加减运算[通俗易懂]vh/vwvh:相对于视窗的高度,视窗被均分为100单位的vh;vw:相对于视窗的宽度,视窗被均分为100单位的vw;vmax:相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin:相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。calcca…

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

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()的兼容性如下,使用时需注意:

这里写图片描述

 

 

 

less中calc 使用

瑤11 2018-10-10 09:36:26   2270   收藏 1
分类专栏: less 文章标签: less calc
版权
发现在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位,全部按照百分比计算,此例中的计算被less编译成calc(96%)。

 

解决方案

      max-height: calc(~”100vh –  69px”);

结合less使用特点

    @postHeight: 46px;

    @postBorderHeight: 1px;

    @postMarginHeight: 10px;

     margin-bottom: calc(~”@{postHeight}” )

     margin-bottom: calc(~”@{postHeight} + @{postBorderHeight} * 3 + @{postMarginHeight} * 2″ )

 

提示:注意运算符(+ –  *  / )的前后一定要有空格,便于解析!!!
————————————————
版权声明:本文为CSDN博主「瑤11」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_40551876/article/details/82992003

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

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

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

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

(0)


相关推荐

  • Bootstrap 流式布局

    Bootstrap 流式布局流式布局同理,将Bootstrap的流式栅格放到class="container-fluid"的流式容器中,即可创建流式布局。流式布局将填满整个视口宽度。如:<divclass="container-fluid"> <divclass="row-fluid">   <divclass="span2">     <!–

    2022年10月24日
  • java连接ldap服务器_从Java应用程序连接LDAP服务器「建议收藏」

    java连接ldap服务器_从Java应用程序连接LDAP服务器「建议收藏」我正在构建一个基于GXT(J2EE)的应用程序.现在的问题是我必须将应用程序连接到LDAP服务器.您能告诉我如何从我们的Java应用程序连接LDAP服务器以及我将使用哪些库或API?解决方法:要连接到LDAP,请查看以下包/类:javax.naming.directory.*javax.naming.ladp.*com.sun.jndi.ldap.LdapCtxFactorycom.sun.jnd…

  • android studio飞机大战游戏带注释源码教程(多线程)[通俗易懂]

    android studio飞机大战游戏带注释源码教程(多线程)[通俗易懂]第一次发博客,学了3天的androidstudio还有一点以前的java基础做了个飞机大战的游戏游戏比较简单大概就这几个功能1.会动的背景2.我的飞机3.发射子弹3.敌人飞机第一步新建一个项目我用的是Android4.4版本新建好项目之后xml文件之类的什么都不用管先新建个类叫做huahua.javapackagecom.dahuijii.liziguo;importandroid.c…

  • java illegal character_java.lang.illegalaccesserror

    java illegal character_java.lang.illegalaccesserror本文整理匯總了Java中org.apache.commons.lang3.ArrayUtils.isNotEmpty方法的典型用法代碼示例。如果您正苦於以下問題:JavaArrayUtils.isNotEmpty方法的具體用法?JavaArrayUtils.isNotEmpty怎麽用?JavaArrayUtils.isNotEmpty使用的例子?那麽恭喜您,這裏精選的方法代碼示例或許可以為…

  • VS2008简体中文正式版序列号

    VS2008简体中文正式版序列号VS2008简体中文正式版序列号1.VisualStudio2008ProfessionalEdition:XMQ2Y-4T3V6-XJ48Y-D3K2V-6C4WT2.VisualStud

  • 怎么卸载电脑上的mysql_mysql installer

    怎么卸载电脑上的mysql_mysql installer如何完美的卸载掉Mysql?按以下几个步骤去执行。步骤一确认你的mysql服务是关闭的状态,不然卸载不干净。在我的电脑(计算机)–管理–服务和应用程序–服务,找到mysql把状态关闭。步骤二在控制面板中卸载mysql软件。步骤三卸载过后删除C:ProgramFiles(x86)\MySQL该目录下剩余了所有文件,把mysql文件夹也删了。因为我的系统是64位,把软件安装的位置是E…

发表回复

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

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