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;
margin属性值可以为百分比
@postBorderHeight: 1px;
@postMarginHeight: 10px;
margin-bottom: calc(~"@{postHeight}" )
margin-bottom: calc(~"@{postHeight} + @{postBorderHeight} * 3 + @{postMarginHeight} * 2" )

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。