css3

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

可以用来制作完全覆盖页面的遮罩层