CSS中屬性的值和單位
阿新 • • 發佈：2018-11-25
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。
百分比可以取負值，但在使用中受到很多限制。