背景： 一次偶然的機會遇到一個朋友在刷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() 函數用於動態 ...