calc()
计算
width: calc(100% - 80px)
heigth: calc(2em * 5)
- * + / 加减乘除都可以 前后要空格否则报错
应用场景 居中 position: absolute;
top: calc(50% - 自己的高度);
left: calc(50% - 自己的宽度);
等等
calc()主要应用在流体布局上,可以通过calc()计算得到元素的宽度。
calc()根据给定百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。
单位
rem 相对于根元素字体大小
vw相对于视窗的困度 视窗宽度是100vw
vh 相对于视窗的宽度 视窗的宽度是100vh
vm 相对于视窗的宽度和高度 取决于哪个更小
视窗指 window.innerWidth / window.innerHeight
可以用来制作完全覆盖页面的遮罩层