CSS3中介紹最新的幾種長度單位

標記說明：

數字上標為疑惑的地方

盡量做到在專有名字後面給出英文翻譯，因為官方的文檔基本上是英文的，經過各個讀者的翻譯後可能有所區別而產生歧義。

概述：

em：相對於目前物件內文字的字體大小。相對於父節點的字體大小

rem：相對於根元素的字體大小。應用場景：以文字內容決定佈局的。

vh和vv：1vh等於1/100的視口高度^①，1vw等於1/100的視窗寬度。

vmin和vmax：關於視窗高度和寬度的最小值或最大值，vmin等於1/100的視口寬高中的最小值。應用場景：讓一個元素始終在螢幕中可見。

ch：數字0的寬度

ex：目前字體的小寫x字母的高度或1/2的1em^②。應用場景：上實上標與下標

擷取到的資訊：

1、font-size：若沒有宣告則會繼承父節點的屬性

引申：

①window, document,body寬高：

body高度是body元素的高度（包括邊框捲軸等），四周默認帶有8px的margin

若沒為html設定顏色，為body設定了顏色，則body的顏色填入整個背景

視窗viewport指的是瀏覽器視覺範圍，除去邊框，捲軸，工具列的文件顯示區域

②0.5em怎麼可能和1ex相等？

實際測試後發現設定0.5em與1ex的表現略有差異。畢竟小寫x字母不一等是字體大小font-size的一半。當然不能排除有種字體剛好滿足這個條件

relative：會在應有的位置上偏移。 dom的原始位置保留

以上是CSS3中介紹最新的幾種長度單位的詳細內容。更多資訊請關注PHP中文網其他相關文章！