簡要的談一談我對CSS中長度單位的理解

標籤：

CSS中的長度單位目前分為兩種，分別是絕對長度和相對長度。絕對長度單位包括：

• in：英寸
• cm：厘米
• mm：毫米
• pt：磅（1磅等於1/72英寸）
• pc：pica（1pica等於12磅）

以上五個就是CSS中定義的絕對長度單位，他們都是在我們實際生活中用的很多，但是在寫CSS代碼製作要在螢幕上顯示的網頁的時候，這種絕對長度單位用到的很少，我能想到的比較有用的地方只有給印刷品設定長度單位時可能會用到，雖然我沒有接觸過。接下來就是相對長度單位，相對，顧名思義就是以某個長度作為參照，設定的相對長度的實際值就是相對長度值*參照值。  CSS中的相對單位包括：

• em：與元素的字型大小掛鈎（font-size）
• ex：與元素字型中字母“x”的實際高度掛鈎（因為不同字型中x的高度是不同的，感覺是個好隨意的單位，為什麼不是其他字母呢0.0）
• rem：與根項目的字型大小掛鈎（html元素是根項目）
• px：css像素（假定顯示裝置的解析度為96dpi）
• %：另一屬性值的百分比

因為相對長度單位用到的比較多，所以有必要加個示範什麼的，直觀感受一下：

1. em

em是參照元素的字型大小來設定自身值的一個相對長度單位，如下所示，我設定p元素的font-size屬性值為14px，給p元素的height設定為4em，同時給line-height也設定為4em，這樣可以讓p元素的內容有一個上下置中的效果。

1 p{2      background: gold;3      color: #000000;4      font-size: 14px;5      height: 4em;6      line-height: 4em;                7 }

1 <p>這是隨便寫的一句話</p>

效果如下所示：

2. rem（個人感覺這個值在響應式布局會很有用，目前用的不多，但將來應該會很熱）

這個單位的實際值=html元素的值*這個單位的相對值如下所示：

 1 html{ 2     font-size: 24px; 3 } 4 p{ 5     background: gold; 6     color: #000000; 7     font-size: 1rem; 8     height: 4em; 9     line-height: 4em;                10 }

1 <p>這是隨便寫的一句話</p>

效果如下：

3. px

像素，這個單位在實際的開發中用的，見得非常多。雖然CSS標準中定義的px是一個相對長度單位，但因為定義的很奇葩（似乎是和讀者的臂長還有關係，我猜這應該也是相對的一種吧:)），所以很多瀏覽器都把1px的長度定義為1英寸的1/96，大約是這樣，所以本質上，px還是一個絕對長度單位。因為很常見，所以就不示範了。

4. %

百分比單位的定義是：可以把一個度量單位表示為 其他屬性值的百分比。我們從定義就可以發現一個問題，這個“其他屬性值”具體是什麼屬性，例如：同一個元素的font-size和width都使用%作為單位，他們所參照的那個“其他屬性值”是同一個嗎？現實給出的答案是：不是同一個！使用百分比符號作為單位會有兩個需要注意的地方：    - 並非所有的屬性都可以使用百分比作為單位。    - 對於可以使用百分比作為單位的元素，他們所對應的那個“其他屬性值”是各不相同的。例如之前說到的font-size，參照的該元素繼承得到的font-size值，而對於width屬性，參照的則包含這個元素的塊的寬度。 以上就是我目前對於CSS中長度單位的一些簡單理解。如果之後有新的感悟和理解，會持續更新。

簡要的談一談我對CSS中長度單位的理解