css3 中的尺寸單位

2021-07-09 02:36:57 字數 1040 閱讀 7929

1、em

它是我們常用的,經常用在字的大小上。

它是大小是相對於父級的大小。

1em=父級px

2、百分比

指的是相對於父級的,在定義標籤的width時會用

3、rem

它是em的增強版,ie9+

它相對於根html來設定大小。不會像em,依賴於父級大小。

一般都是:

html

原因:頁面預設的大小是16px;但這樣我想要12px時就應該是0.625rem。

這樣算起來也不好算,如果預設大小是10px這樣算起來就好多了

1rem=10px  1.2rem=12px

所以62.5=10/16

4、vh vw(ie10+)

vw單位是相對於頁面的寬,1vw=頁面寬的1%

vh單位是相對於頁面的高,1h=頁面高的1%

此單位可用於width font-size等

5、vmin vmax  (ie10+)

vmin 獲取的是頁面寬和高中比較小的值

1vmin=寬高中小的值的1%

vmax獲取的是頁面寬和高中比較大的值

1vmax=寬高中大的值的1%

它可用於width font-size等

6、ch ex(ie9+)

這兩個單位是相對於當前字型的單位。

ch 是當前字型下0字元的寬度

ex 是當前字型下x字元的高度

當然字元的寬和高也是和當前標籤的字型大小有關。

它約定於字型和字型大小。

7、line-height

它的百分比也會常用到,

line-height:26px   行高26px

line-height:120%  行高是當前字型的120%

line-height:2em;  行高為當前字型的2倍

帶單位的行高是有繼承關係的,不會因為字大小的改變而改變行高

如父字型14px 行高2em 則是28px

子字是12px  它的行高還是28px

不帶單位的行高繼承是隨著子的字型大小來計算出行高的

CSS3新的字型尺寸單位rem

css3引入新的字型尺寸單位 rem 可以簡單記憶為root rm。css3的出現,他同時引進了一些新的單位,包括我們今天所說的rem。在w3c官網上 是這樣描述rem的 font size of the root element 下面我們就一起來詳細的 了解rem。em單位是相對于父節點的font...

css中尺寸單位介紹

1.em 在做手機端的時候經常會用到的做字型的尺寸單位 說白了 em就相當於 倍 比如設定當前的div的字型大小為1.5em,則當前的div的字型大小為 當前div繼承的字型大小 1.5 但是當div進行巢狀的時候,em始終是按照當前div繼承的字型大小來縮放,參照後面的例子。2.rem 這裡的r就...

CSS3 中的取值和單位

在 css3 中增加了很多度量的單位和取值,下面是專案開發中常用到的單位和取值。1.長度值單位 h1 如果視口的寬度是200mm,那麼上述 中h1元素的字型大小將為16mm,即 8x200 100。h1 如果視口的寬度是300mm,高度是200mm,那麼上述 中h1元素的字型大小將為24mm,即 8...