px
- 這個(gè)就不多說了，
CSS中最為常用的一種單位，傳統(tǒng)上一個(gè)像素對(duì)應(yīng)計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)。
百分比%
- 子元素相對(duì)父容器的占比
- 設(shè)置子元素的
font-size為50%，那么子元素的font-size等于父容器的font-size*50%。
em
-
em是一個(gè)相對(duì)單位 - 1em等于該元素設(shè)置的字體大小
這里有一個(gè)很常見的誤區(qū)，很多人說1em等于其父元素的字體大小，其實(shí)這是不對(duì)的，在該元素沒有設(shè)置字體大小的時(shí)候，該元素的字體大小繼承了其父元素的字體大小，所以這時(shí)該元素上1em等于其父元素的字體大小。但是如果該元素自己設(shè)置了字體大小且不等于其父元素的字體大小，那么該元素上1em就等于該元素自己的字體大小而于其父元素的字體大小無關(guān)。
例如下邊這段代碼，box2自己設(shè)定了font-size：15px；而box1沒有設(shè)定font-size，所以box的font-size繼承了其父元素的font-size等于20px。造成的結(jié)果是box1中1em等于20px；box2中1em等于15px，所以box2的寬度會(huì)小于box1的寬度。
<div style="font-size:20px;">
<div style="width: 5em;background-color: blueviolet">box1</div>
<div style="font-size: 15px;width: 5em;background-color: blue">box2</div>
</div>
屏幕快照 2018-11-07 下午10.45.00.png
- 為什么使用
em，或者說em相較于px的好處
- 用戶可以設(shè)置字體大小
- 如果使用
em為單位，用戶在瀏覽器中設(shè)置字號(hào)大小，我們的頁(yè)面字體和用em作為單位設(shè)定的屬性也會(huì)相應(yīng)的改變（例如設(shè)定width:5em;用戶修改瀏覽器字號(hào)后該元素的寬度也會(huì)變化），使用px則沒有任何改變（很多國(guó)外的網(wǎng)站是這樣做的，國(guó)內(nèi)這樣做的很少）。
- 修改方便快捷
- 修改父容器的字體大小子元素的字體大小都會(huì)跟著改變，這一點(diǎn)是
px無法做到的 - 舉一個(gè)例子可能更好理解，比如我們寫一片文章的樣式，有標(biāo)題，二級(jí)標(biāo)題，大綱，文本，現(xiàn)在要整體將字體放大，我們只需要修改
html或者body的font-size就可以了,如果使用px作單位就需要每一處分別修改了。
rem
-
rem是對(duì)em的改進(jìn)，這里我們先講一下em的一個(gè)很煩人的缺陷，就是遇到嵌套很深的結(jié)構(gòu)，我們就不容易立刻知道每個(gè)子元素的1em等于多個(gè)px了，比如下面這個(gè)例子：
.outer{
font-size: 2em;
}
.inner,.text{
font-size: 0.75em;
}
<div class="outer">
<div class="articl-title">測(cè)試一下，你就知道的點(diǎn)點(diǎn)滴滴多多多多多</div>
<div id="inner" class="inner">
<a href="">css中的常見單位</a>
<p class="text">em和rem有哪些不同</p>
</div>
</div>
-
.outer的font-size為2em，我們沒有給它以上的父容器設(shè)置font-size，所以它的font-size為16px*2=32px，但是我們想知道.text的font-size就比較復(fù)雜了16px*2*0.75*0.75=18px。 - 如何解決這問題呢？這里css3引入了
rem的概念，與em非常相似，最重要的不同是，不論在那一級(jí)元素上1個(gè)rem都等于跟元素html的font-size，這樣不僅具有em的優(yōu)點(diǎn)，還不會(huì)造成混亂，不論html結(jié)構(gòu)嵌套多復(fù)雜我們都能輕松換算出當(dāng)前元素的font-size對(duì)應(yīng)多少個(gè)px。
<div style="font-size: 1.5rem; width: 5rem;background-color: #797979;">1.5rem;</div>
html{
font-size: 20px;
}
- 上面這段代碼中，即使我們給當(dāng)前元素設(shè)定了
font-size:1.5rem;但不影響我們width:5rem的計(jì)算，當(dāng)前元素的寬度還是以1rem=20px;計(jì)算20*5=100px; - 這里有一點(diǎn)建議,給
<html>根元素添加如下的樣式：
html{
font-size:62.5%;
}
- 這樣一來根元素
<html>的font-size就變成16px*62.5%=10px,也就是1rem=10px。這樣方便我們計(jì)算（與設(shè)計(jì)稿對(duì)照）
vw和vh
| 名稱 | 解釋 |
|---|---|
| vw | 1vw = 視口寬度的1% |
| vh | 1vw = 視口高度的1% |
| vmin | 選取vw和vh中最小的那個(gè) |
| vmax | 選取vw和vh中最大的那個(gè) |
- 這里解釋一下視口
這里視口的寬度和高度不是指屏幕的高寬，更不是瀏覽器的高寬，而是瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/window.innerHeight - 目前使用的場(chǎng)景并不多，因?yàn)槭褂冒俜直纫部梢詫?shí)現(xiàn)相同的效果，我個(gè)人在制作幻燈片效果時(shí)，會(huì)選擇使用
vw,vh,比較方便。
先寫這些有時(shí)間再更
