在CSS中,值的類型有很多種,一些很常見锥余,一些你卻幾乎沒怎么遇到過。我們不會在這篇文檔中面面俱到地描述他們痢掠,而只是這些對于掌握CSS可能最有用處的這些驱犹。本文將會涉及如下CSS的值:
數(shù)值: 長度值,用于指定例如元素寬度足画、邊框(border)寬度或字體大小雄驹。
百分比: 可以用于指定尺寸或長度——例如取決于父容器的長度或高度,或默認(rèn)的字體大小淹辞。
顏色: 用于指定背景顏色医舆,字體顏色等。
坐標(biāo)位置: 例如,以屏幕的左上角為坐標(biāo)原點(diǎn)定位元素的位置蔬将。
函數(shù): 例如爷速,用于指定背景圖片或背景圖片漸變。
數(shù)值
絕對單位
-
px
:像素
一般來說娃胆,不會使用px以外的其他單位遍希。
相對單位
相對于當(dāng)前元素的字號( font-size
)或者視口(viewport)尺寸
em
:1em與當(dāng)前元素的字體大小相同(更具體地說,一個大寫字母M的寬度)里烦。CSS樣式被應(yīng)用之前凿蒜,瀏覽器給網(wǎng)頁設(shè)置的默認(rèn)基礎(chǔ)字體大小是16像素,這意味著對一個元素來說1em的計算值默認(rèn)為16像素胁黑。但是要小心—em單位是會繼承父元素的字體大小废封,所以如果在父元素上設(shè)置了不同的字體大小,em的像素值就會變得復(fù)雜∩フ海現(xiàn)在不要過于擔(dān)心這個問題漂洋,我們將在后面的文章和模塊中更詳細(xì)地介紹繼承和字體大小設(shè)置。em是Web開發(fā)中最常用的相對單位力喷。rem
: REM(root em)和em以同樣的方式工作刽漂,但它總是等于默認(rèn)基礎(chǔ)字體大小的尺寸;繼承的字體大小將不起作用弟孟,所以這聽起來像一個比em更好的選擇贝咙,雖然在舊版本的IE上不被支持。vw
,vh
: 分別是視口寬度的1/100和視口高度的1/100拂募,其次庭猩,它不像rem那樣被廣泛支持。
em
陈症、rem
現(xiàn)在常被用作移動端網(wǎng)頁的開發(fā)制作蔼水。
同時,有些屬性中使用負(fù)值(例如:margin:-100%;
)完成一些布局效果
百分比
使用百分比值指定可以通過特定數(shù)值指定的大部分內(nèi)容录肯。 使用em或者百分比可以完成流動布局和固定寬布局趴腋。
顏色
CSS中指定顏色的方法主要通過十六進(jìn)制值、RGB论咏、HSL于样,其中RGB和HSL都有相應(yīng)的模式——RGBA和HSLA——不僅允許您設(shè)置想要顯示的顏色,還有此顏色的透明度(a即為alpha通道潘靖。0是完全透明穿剖,1是完全不透明)。此外卦溢,此前已有的opacity屬性糊余,可以在動畫中展現(xiàn)不同效果秀又。
函數(shù)
一些函數(shù)作為屬性值存在于CSS中。
例舉些比較有趣的函數(shù):
calc()
:四則運(yùn)算來決定一個CSS屬性的值贬芥。針對盒模型吐辙,它可以不用通過改變box-sizing
,而是通過計算蘸劈,來實(shí)現(xiàn)content-box
和border-box
在外貌上的相似昏苏。也可以簡單的設(shè)置一些邊距,例如:width: calc(100% - 80px);
參考:MDN:CSS的值和單位