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()計算得到元素的寬度。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章