CSS中值的單位
1.顏色值
被各種瀏覽器支持,并且作為 CSS 規范推薦的顏色名稱只有 16 種,如下表所示。
?
百分比表示
color: rgb(100%, 100%, 100%);
這個聲明將紅、藍、綠 3 種原色都設置為最大值,結果組合顯示為白色。相反,可以設置rgb(0%, 0%, 0%)
為黑色。3 個百分值相等將顯示灰色,同理哪個百分值大就偏向哪個原色。
數值
color: rgb(255, 255, 255);
?
數字范圍從 0~255,3 個數值相等將顯示灰色,同理哪個數值大哪個原色的比重就會加大。
十六進制顏色
color: #ffffff;
從 0~255,實際上十進制的 255 正好等于十六進制的 FF,一個十六進制的顏色值等于 3 組這樣的十六進制的值,它們按順序連接在一起就等于紅、藍、綠3種原色。
2.絕對單位
相對單位與絕對單位相比顯示大小不是固定的,它所設置的對象受屏幕分辨率、可視區域、瀏覽器設置以及相關元素的大小等多種因素影響。
1) em
em 單位表示元素的字體高度,它能夠根據字體的 font-size 屬性值來確定單位的大小。
2) ex
ex 單位根據所使用的字體中小寫字母 x 的高度作為參考。在實際使用中,瀏覽器將通過 em 的值除以 2 得到 ex 的值。
3) px
px 單位是根據屏幕像素點來確定的。這樣不同的顯示分辨率就會使相同取值的 px 單位所顯示出來的效果截然不同。
實際設計中,建議網頁設計師多使用相對長度單位 em,且在某一類型的單位上使用統一的單位。如設置字體大小,根據個人使用習慣,在一個網站中,可以統一使用 px 或 em。
3.百分比
百分比也是一個相對單位值。百分比值總是通過另一個值來計算,一般參考父對象中相同屬性的值。例如,如果父元素寬度為 500px,子元素的寬度為 50%,則子元素的實際寬度為 250px。
百分比可以取負值,但在使用中受到很多限制。
?