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...