视区相关单位vw, vh..简介以及可实际应用场景

来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2636

一：准确定义：

“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

二：元素水平居中

margin:1vh auto；技巧：auto左右居中。

三、通过demo验证vw,vh应用场景

1. vw, vh用在宽度自适应上没有价值——%可以实现之~~
2. 现在又：vw, vh用在absolute/fixed定位属性元素上没有价值——%可以实现之~~

vw, vh这两个视区相关动态单位似乎应用前景一下子黯淡了很多，潜力似乎也就那样——想来想去，得出一个结论：vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！ //zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

四、纯CSS下的弹框屏幕水平垂直居中对齐

设需垂直水平居中元素为A，A的父元素样式：text-align:center;A样式：vertical-align:middle。

优势：灵活，A大小如何变化，均水平垂直居中