calc()
計算
width: calc(100% - 80px)
heigth: calc(2em * 5)
- * +? /? 加減乘除都可以 前后要空格否則報錯
應(yīng)用場景 居中 position: absolute;
? ? ? ? ? ? ? ? ? ? ? ? top: calc(50% - 自己的高度)著蟹;
? ? ? ? ? ? ? ? ? ? ? ? left: calc(50% - 自己的寬度);
等等
calc()主要應(yīng)用在流體布局上,可以通過calc()計算得到元素的寬度舔痕。
calc()根據(jù)給定百分比魏滚、em镀首、px和rem單位值計算出其寬度或者高度,比如說“width:calc(50% + 2em)”,這樣一來你就不用考慮元素DIV的寬度值到底是多少,而把這個煩人的任務(wù)交由瀏覽器去計算。
單位
rem 相對于根元素字體大小
vw相對于視窗的困度 視窗寬度是100vw
vh 相對于視窗的寬度 視窗的寬度是100vh
vm 相對于視窗的寬度和高度 取決于哪個更小
視窗指 window.innerWidth / window.innerHeight
可以用來制作完全覆蓋頁面的遮罩層