筆記:CSS的常用值和單位

在CSS中,值的類型有很多種,一些很常見,一些你卻幾乎沒怎么遇到過。我們不會在這篇文檔中面面俱到地描述他們,而只是這些對于掌握CSS可能最有用處的這些。本文將會涉及如下CSS的值:

  • 數值: 長度值,用于指定例如元素寬度、邊框(border)寬度或字體大小。

  • 百分比: 可以用于指定尺寸或長度——例如取決于父容器的長度或高度,或默認的字體大小。

  • 顏色: 用于指定背景顏色,字體顏色等。

  • 坐標位置: 例如,以屏幕的左上角為坐標原點定位元素的位置。

  • 函數: 例如,用于指定背景圖片或背景圖片漸變。

數值

絕對單位

  • px:像素

一般來說,不會使用px以外的其他單位。

相對單位

相對于當前元素的字號( font-size )或者視口(viewport)尺寸

  • em:1em與當前元素的字體大小相同(更具體地說,一個大寫字母M的寬度)。CSS樣式被應用之前,瀏覽器給網頁設置的默認基礎字體大小是16像素,這意味著對一個元素來說1em的計算值默認為16像素。但是要小心—em單位是會繼承父元素的字體大小,所以如果在父元素上設置了不同的字體大小,em的像素值就會變得復雜。現在不要過于擔心這個問題,我們將在后面的文章和模塊中更詳細地介紹繼承和字體大小設置。em是Web開發中最常用的相對單位

  • rem: REM(root em)和em以同樣的方式工作,但它總是等于默認基礎字體大小的尺寸;繼承的字體大小將不起作用,所以這聽起來像一個比em更好的選擇,雖然在舊版本的IE上不被支持。

  • vw, vh: 分別是視口寬度的1/100和視口高度的1/100,其次,它不像rem那樣被廣泛支持。

emrem現在常被用作移動端網頁的開發制作。

同時,有些屬性中使用負值(例如:margin:-100%;)完成一些布局效果

百分比

使用百分比值指定可以通過特定數值指定的大部分內容。 使用em或者百分比可以完成流動布局和固定寬布局。

顏色

CSS中指定顏色的方法主要通過十六進制值、RGB、HSL,其中RGB和HSL都有相應的模式——RGBAHSLA——不僅允許您設置想要顯示的顏色,還有此顏色的透明度(a即為alpha通道。0是完全透明,1是完全不透明)。此外,此前已有的opacity屬性,可以在動畫中展現不同效果。

函數

一些函數作為屬性值存在于CSS中。

例舉些比較有趣的函數:

calc():四則運算來決定一個CSS屬性的值。針對盒模型,它可以不用通過改變box-sizing,而是通過計算,來實現content-boxborder-box在外貌上的相似。也可以簡單的設置一些邊距,例如:width: calc(100% - 80px);

參考:MDN:CSS的值和單位

MDN:calc

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容