高有無單位的問題

Div{font: 12px/1.5 '宋體'}
Div{font: 12px/1.5em '宋體'}
Div{font: 12px/150% '宋體;}

<style>
.father{
width:200px;
height:30px;
background-color:pink;
font-size:16px;
line-height:2em;
}
.son{
font-size:20px; /* 繼承過來的行高為32px */
}
</style>
<div class="father">
<div class="son"> 我是文字 </div>
</div>
<style>
.father{
width:200px;
height:30px;
background-color:pink;
font-size:16px;
line-height:2;  /* 設置文本所在行的行高。默認為normal。 */
}
.son{
font-size:20px; /* 繼承過來的行高為40px 20*2px */
}
</style>
<div class="father">
<div class="son"> 我是文字 </div>
</div>

行高 2em 和 2 不一樣的。

加em ：

先計算大小, 后繼承。

不跟單位：

先繼承, 后計算大小。

、介紹

傳統的項目開發中，我么只會用到px、%、em這幾個單位，它們可以適用于大部分的項目開發，并且具有良好的兼容性。

從CSS3開始，瀏覽器對計量單位的支持又提升到了另外一個境界，新增了rem、vh、vw、vm等一些新的計量單位。

利用這些新的單位開發出比較良好的響應式頁面，適應多種不同分辨率的終端，包括移動設備等。

二、單位

在css單位中，可以分為長度單位、絕對單位，如下表所指示

今天我們主要講講px、em、rem、vh、vw、vm之間的區別

1.px

px，表示像素，所謂像素就是呈現在我們顯示器上的一個個小點，每個像素點都是大小等同的，所以像素為計量單位被分在了絕對長度單位中。有些人會把px認為是相對長度，原因在于在移動端中存在設備像素比，px實際顯示的大小是不確定的。這里之所以認為px為絕對單位，在于px的大小和元素的其他屬性無關。

2.em

em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸（1em = 16px）。為了簡化 font-size 的換算，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變為 16px*62.5% = 10px。這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的px 數值除以 10，然后換上 em作為單位就行了。

特點：

• em 的值并不是固定的
• em 會繼承父級元素的字體大小
• em 是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸
• 任意瀏覽器的默認字體高都是 16px

舉個例子:

<div class="big">
    我是14px=1.4em<div class="small">我是12px=1.2em</div>
</div>

<style>
    html {font-size: 10px;  } /*  公式16px*62.5%=10px  */  
    .big{font-size: 1.4em}
    .small{font-size: 1.2em}
</style>
復制代碼

這時候.big元素的font-size為14px，而.small元素的font-size為12px

3.rem

rem，相對單位，相對的只是HTML根元素font-size的值。同理，如果想要簡化font-size的轉化，我們可以在根元素html中加入font-size: 62.5%。

html {font-size: 62.5%;  } /*  公式16px*62.5%=10px  */ 
復制代碼

這樣頁面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得視覺、使用、書寫都得到了極大的幫助

特點：

• rem單位可謂集相對大小和絕對大小的優點于一身
• 和em不同的是rem總是相對于根元素，而不像em一樣使用級聯的方式來計算尺寸

4.vh、vw

vw是根據窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬。（vw 始終是針對窗口的寬），同理，vh則為窗口的高度。

這里的窗口分成幾種情況：

• 在桌面端，指的是瀏覽器的可視區域
• 移動端指的就是布局視口

像vw、vh，比較容易混淆的一個單位是%，不過百分比寬泛的講是相對于父元素：

• 對于普通定位元素就是我們理解的父元素
• 對于position: absolute;的元素是相對于已定位的父元素
• 對于position: fixed;的元素是相對于 ViewPort（可視窗口）

5.vm

相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm。

舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。

三、總結

• 「px」：絕對單位，頁面按精確像素展示
• 「em」：相對單位，基準點為父節點字體的大小，如果自身定義了font-size按自身來計算，整個頁面內1em不是一個固定的值
• 「rem」：相對單位，可理解為root em, 相對根節點html的字體大小來計算
• 「vh、vw」：主要用于頁面視口大小布局，在頁面布局上更加方便簡單
• 「vm」：對于視口的寬度或高度中較小的那個,使用方法和vh\vm類似

作者鏈接：https://juejin.cn/post/6945618076087894052