CSS3之视区单位vw, vh

说一下在一个应用中设置元素大小时用到的一些方法:

1.CSS3中的新单位即vw, vh:

#songList {display:none; position:fixed; bottom:0px;left:35%; height:50vh; width:30%; text-align:center;}

vw:则是相对于视窗的宽度,vh:相对于视窗的高度。

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

详细用法可以参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/

2.calc

left:calc(50% - 144px);

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。例如,你可以使用calc()给元素的border、margin、pading、font-size、height和width等属性设置动态值。之所以说是动态值,因为这是我们使用表达式来得到的值。calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

猜你喜欢

转载自blog.csdn.net/freya_yyy/article/details/80659270