vh/vwvh
: 相对于视窗的高度, 视窗被均分为100单位的vh;vw
: 相对于视窗的宽度, 视窗被均分为100单位的vw;
vmax
: 相对于视窗的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;vmin
: 相对于视窗的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;视区
所指为浏览器内部的可视区域大小,
即window.innerWidth/window.innerHeight
大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
vw、vh 与 % 百分比的区别
(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
calc
简单来说就是CSS3中新增的一个函数,calculate(计算)的缩写。用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值【margin、border、padding、font-size】等。
calc()语法
calc的语法就是简单的四则运算,
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"width: calc(12%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
特殊情况:
width: calc(100% - 16.5em)这样写不生效的时候,可以这样写:width: e('calc(100% - 16.5em)') 或者width: calc(~"100% - 16.5em")