css中100vh 加减运算

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

css中100vh 加减运算相关推荐

Velocity 页面加减运算
最近在项目中需在VM页面中进行加减运算,如 $!row.buyNum - $!row.sellNum 在页面上打印出来就是 3-0 然后不知道怎么用Velocity进行页面的加减运算,问了一下度娘,也 ...
使用全加器实现补码的加减运算
引言: 我们都知道,在计算机中的加减运算都是由补码来实现的,那么,计算机是如何运用电路来实现补码的加减的呢?在计算机中,所有的加减运算其实都变成了加法后来参与运算的,那么仅需要一个加法器就可以实现了. ...
c语言中减号算一个字符吗,C语言中指针的加减运算
char arr[3]; printf("arr:\n%d\n%d\n%d\n", arr, arr + 1, arr + 2); char *parr[3]; printf(&q ...
关于等价无穷小在加减运算中的应用
关于等价无穷小在加减运算中的应用 1 初体验为什么可以加减中运用等价无穷小? 例如: 例 1 limx→02sinx−ex+1xlim_{x \to 0} \frac{2sinx-e^x+1}{x} ...
浮点加减运算中关于结果规格化的思考
对于两个浮点数x和y满足: 完成x与y的加减法有四个步骤: 0操作数检查.即检查是否有一个操作数为0,是的话直接得到结果,一般在计算机中不进行这一步. 比较阶码大小并完成对阶.要让两个浮点数的尾数能够 ...
php中超过int真么办,PHP int 超大溢出整数的加减运算函数，如果有更好的方法欢迎探讨...
[分享]PHP int 超大溢出整数的加减运算函数,如果有更好的方法欢迎探讨分享一个溢出整数加减的运算函数,刚刚写的,对于溢出的整数可以用这个来进行加减运算. 遗憾的几点是: 一代码太多: 二只有 ...
HTML5实现浮点数的加减运算,浮点数表示例题
设 A=–0.101101*2-3,B= 0.101001*2-2,先将A.B表示为规格化的浮点数.要 N=(+-)M2E 其中:M代表尾数,E代表阶码. 计算机中浮点数只用尾数和阶码表示 ...
php自定义函数数学计算,ThinkPHP自定义函数解决模板标签加减运算的方法
本文实例讲述了ThinkPHP自定义函数解决模板标签加减运算的方法.分享给大家供大家参考.具体如下: 实际项目中,我们经常需要标签变量加减运算的操作.但是,在ThinkPHP中,并不支持模板变量直接运 ...
【数据结构与算法】之深入解析“分数加减运算”的求解思路与算法示例
一.题目要求给定一个表示分数加减运算的字符串 expression,你需要返回一个字符串形式的计算结果. 这个结果应该是不可约分的分数,即最简分数. 如果最终结果是一个整数,例如 2,你需要将它转换 ...

css中100vh 加减运算

css中100vh 加减运算相关推荐

最新文章

热门文章