背景： 一次偶然的机会遇到一个朋友在刷css的库其中有这样一道题（css变量如何定义，calc, support, media），我看一眼熟悉而陌生，知其一而不知其二，叔可忍婶不可忍，马上就度娘起来，看一看它的真面目。 一 support 了解到了@support的这个属性，记录下：CSS中 ...

说明：calc（四则运算）；任何长度值都可以使用calc()函数进行计算；和平时的加减乘除优先顺序一样一样的； 特别注意：calc（）里面的运算符必须前后都留一个空格，不然浏览器识别不了，比如：calc(100% - 5px); 兼容性： HTML: CSS ...

什么是calc()? calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能; MDN的解释为可以用在任何长度,数值,时间,角度,频率等处; 可以用 + - * / 符号来进行运算; 但需要注意的是 + - 必须用空格隔开 ...

例如父盒子是100%的高度 　　盒子里面的head部分固定位140px 　　内容部分始终为剩余的全部高度 　　　　height: calc(100% - 140px); 切结"+或-"两边要有空格 不然不生效 ...

vh/vwvh: 相对于视窗的高度, 视窗被均分为100单位的vh;vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100 ...

width:calc(50%-20px); 这样书写是无效的因为calc中计算的两个因子同运算符号之间必须存在空格； ...

上面的明显就不对，下面展示有效的写法： 在浏览器查看页面相关样式属性： 完美有效！ ...

例如父盒子是100%的高度 盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px); "+或-"两边要有空格 不然不生效 calc() 函数用于动态 ...