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