整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
端開(kāi)發(fā)中長(zhǎng)度單位有很多，最為常用和熟知的肯定就是px了，隨著前端的不斷發(fā)展，em和rem也越來(lái)越普及，只用px一把梭的時(shí)代早已成為過(guò)去。是px過(guò)時(shí)了嗎？如果對(duì)這些單位的使用場(chǎng)景不夠了解，可能就會(huì)拿著一個(gè)rem從頭梭到尾了。本篇我們來(lái)好好梳理一下css中的長(zhǎng)度單位以及它們的使用場(chǎng)景，我們要在合適的場(chǎng)景使用合適的單位。
px是像素點(diǎn)單位，與之線性相關(guān)的單位有mm（毫米）、cm（厘米）、in（英寸）、pt（點(diǎn)，印刷術(shù)語(yǔ)，1/72英寸）、pc（派卡，印刷術(shù)語(yǔ)，12點(diǎn)）。
1in=25.4mm=2.54cm=6pc=72pt=96pxem是相對(duì)長(zhǎng)度單位，適合基于特定的字號(hào)進(jìn)行排版。1em=當(dāng)前元素的字號(hào)，其準(zhǔn)確值取決于作用的元素。
.padded {
font-size: 16px;
padding: 1rem;
}上面的代碼設(shè)置了元素的內(nèi)邊距為16px。最終瀏覽器會(huì)根據(jù)相對(duì)單位計(jì)算出絕對(duì)值。
使用em來(lái)設(shè)置padding、height、width、border-radius很合適，當(dāng)前元素如果繼承了不同的字號(hào)，響應(yīng)的內(nèi)邊距、寬高也會(huì)自動(dòng)隨之縮放。
需要注意的是，如果使用em定義元素的字號(hào)，em的表現(xiàn)會(huì)稍有不同。上面提到，當(dāng)前元素的字號(hào)決定了1em的值，但是，如果聲明font-size：1.2em，該元素的字號(hào)肯定不能等于自己的1.2倍。實(shí)際上，此時(shí)font-size是根據(jù)當(dāng)前元素繼承的字號(hào)來(lái)計(jì)算的。
em示例
上圖可以看到，p標(biāo)簽中的字號(hào)是1.2*16=19.2px，font-size是根據(jù)繼承的字號(hào)計(jì)算的。
em需要注意的就在于此，同時(shí)用它指定一個(gè)元素的字號(hào)和其他屬性時(shí)，瀏覽器必須先計(jì)算字號(hào)，然后使用這個(gè)計(jì)算值算出其余的屬性值。
另外，當(dāng)用em來(lái)指定多重嵌套的元素的字號(hào)時(shí)，就會(huì)產(chǎn)生意外的結(jié)果，內(nèi)嵌的元素會(huì)一直繼承上級(jí)的字號(hào)，導(dǎo)致要么嵌套字號(hào)越來(lái)越大，要么越來(lái)越小。
rem和em很像，其實(shí)和em的理念很像，都是相對(duì)單位，rem中的r是root，顧名思義，rem是相對(duì)一個(gè)root元素（一般以html標(biāo)簽作為根元素）計(jì)算值的，不管在文檔的什么位置。
rem結(jié)合了px和em的優(yōu)先，既保留了相對(duì)單位的優(yōu)勢(shì)，又簡(jiǎn)單易用可控。那只用rem行嗎？行，也不行。如果你只了解習(xí)慣這一個(gè)單位，就要充分發(fā)揮rem的優(yōu)勢(shì)，全站梭到底也沒(méi)什么不行的。但是如果你想寫(xiě)出簡(jiǎn)單好看的css代碼，在不同的場(chǎng)景下使用適當(dāng)?shù)膯挝粫?huì)讓你和你的隊(duì)友少趟許多的坑。
一般情況下，我會(huì)使用rem設(shè)置字號(hào)，用px設(shè)置邊框、用em來(lái)設(shè)置其他大部分的屬性，尤其是內(nèi)邊距、外邊距、圓角等。這樣字號(hào)是可預(yù)測(cè)的，同時(shí)還能在其他因素改變?cè)刈痔?hào)時(shí)，借助em縮放內(nèi)外邊距。你覺(jué)得呢？
我們先介紹一下概念：
視口：瀏覽器窗口里網(wǎng)頁(yè)可見(jiàn)部分的邊框區(qū)域，不包括瀏覽器的地址欄、工具欄、狀態(tài)欄。
vh：視口高度的1/100
vw：視口寬度的1/100
vmin：視口寬、高中較小的一方的1/100
vmax：視口寬、高中較大的一方的1/100
從定義上，相信小伙伴們已經(jīng)明白了視口單位的用法。我來(lái)介紹相對(duì)視口單位的一個(gè)比較特別的用途：設(shè)置字號(hào)。誒？之前不是說(shuō)設(shè)置字號(hào)用rem嗎？用視口單位能有什么特別的呢？
用rem設(shè)置字號(hào)的時(shí)候，為了適配不同的屏幕大小，免不了要使用@media根據(jù)不同的屏幕設(shè)置根元素的字號(hào)大小，有一個(gè)小小的問(wèn)題是，如果動(dòng)態(tài)去調(diào)整瀏覽器的寬度，達(dá)到設(shè)置的斷點(diǎn)時(shí)，一定程度會(huì)導(dǎo)致頁(yè)面的字體突然變大或縮小。但是，如果是使用vw來(lái)設(shè)置字號(hào)呢？頁(yè)面的字號(hào)是不是就不會(huì)突然的變化？會(huì)很平滑？
當(dāng)然了，這種用法在實(shí)際應(yīng)用中推廣的程度不是特別高，有些是因?yàn)闉g覽器支持的問(wèn)題，有些是因?yàn)闆](méi)必要因?yàn)檫@么一點(diǎn)點(diǎn)的優(yōu)化，而放棄心愛(ài)的rem。
今天所寫(xiě)的內(nèi)容主要是幫大家回顧一下css單位的用途及場(chǎng)景，還有一些單位（如fr）還沒(méi)有提及，將會(huì)在后面的文章中結(jié)合別的屬性寫(xiě)。各種單位的存在一定都有各自的特長(zhǎng)和適合的場(chǎng)景，偶爾打開(kāi)一下思路，也許能有更好的解決方案。大家有想和我分享的內(nèi)容嗎？感謝評(píng)論關(guān)注哦！
、position:absolute的原點(diǎn)是哪里？
答：position:absolute 是絕對(duì)定位
原點(diǎn)默認(rèn)是body的左上角，意思就是設(shè)置了 left:0 top:0 以后，此元素會(huì)位于左上角；但如果父元素設(shè)定了position屬性以后，此元素的原點(diǎn)會(huì)跟隨父元素的左上角。
2、簡(jiǎn)單說(shuō)一下css選擇器都有哪幾種？
答：有id選擇器，class選擇器，元素選擇器
> 子選擇器 空格子選擇器
偽類(lèi)選擇器
屬性選擇器 等等
如果覺(jué)得這樣說(shuō)太籠統(tǒng)，想舉例子的小伙伴，去看前面的文章啊，有專(zhuān)門(mén)的文章進(jìn)行講解來(lái)著
3、怎么把一個(gè)元素隱藏起來(lái)？盡可能多的說(shuō)出你的解決辦法
答：
4、說(shuō)一說(shuō)清除浮動(dòng)的解決辦法
答：
清除浮動(dòng)是指一個(gè)父元素，N個(gè)子元素，子元素設(shè)置了float:left 這樣父元素如果沒(méi)有設(shè)置高度的話，父元素就失去了height 。這樣不管子元素有多高，父元素都不能被撐起來(lái)。所以清楚浮動(dòng)問(wèn)的是怎么把父元素?fù)纹饋?lái)的問(wèn)題。
5、div垂直居中，說(shuō)出你用過(guò)的解決方案
答：
<div class="dd">書(shū)軟</div>
6、兩個(gè)a標(biāo)簽之間出現(xiàn)間隙的情況遇到過(guò)嗎？怎么解決的
答： 寫(xiě)html代碼的時(shí)候，如果兩個(gè)a標(biāo)簽出現(xiàn)換行，就會(huì)有間隙，可以不換行，寫(xiě)到一行，間隙就沒(méi)了；也可以設(shè)置 display:inline-block 然后設(shè)置一定量的margin 負(fù)值，這樣也是可以消除間隙的。
7、請(qǐng)寫(xiě)出css中 px em rem vw 的使用
答： 這里不做詳細(xì)的解說(shuō)了啊，前面的文章我們有一節(jié)說(shuō)的很詳細(xì)了，可以再去看一遍。小伙伴如果覺(jué)得還不是很清楚，就去看看文章，再電腦上敲一敲代碼。面試的時(shí)候一定不能背書(shū)，要總結(jié)出自己的一套說(shuō)辭，這樣才能更顯得是你的經(jīng)驗(yàn)之談。面試官也怕丟人，面試的時(shí)候人家比自己懂得太多不行，所以有一些問(wèn)題你能說(shuō)出大概他就不往深里問(wèn)了。當(dāng)然，也不排除他覺(jué)得你懂得多，看你不順眼，就使勁兒難為你的。
8、從css角度說(shuō)說(shuō)，如何優(yōu)化你的網(wǎng)頁(yè)
答：
9、關(guān)于css盒模型
答： 這個(gè)問(wèn)題也很常見(jiàn)，這個(gè)問(wèn)題不清楚的回去看文章啊，前面有一節(jié)說(shuō)這個(gè)問(wèn)題的文章，在電腦上試一試，在紙上畫(huà)一畫(huà)，體會(huì)體會(huì)，這里不做詳細(xì)解說(shuō)了。
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)！
em 和 rem這種相對(duì)長(zhǎng)度單位進(jìn)行頁(yè)面排版是web開(kāi)發(fā)中的最好的選擇。在頁(yè)面排版中較好應(yīng)用em 和 rem，根據(jù)設(shè)備尺寸縮放顯示元素的大小。這就使得組件在不同設(shè)備上都達(dá)到最佳的顯示效果成為可能。
web開(kāi)發(fā)中該用 em 還是 rem 呢？
但問(wèn)題是究竟該用 em 還是 rem 呢？關(guān)于這個(gè)問(wèn)題一直存在比較大的爭(zhēng)議。本文將會(huì)給大家介紹究竟什么是 em 和 rem 和如何進(jìn)行兩者的選擇，以及結(jié)合兩者優(yōu)勢(shì)構(gòu)建模塊化的web組件。
em 是相對(duì)長(zhǎng)度單位。它相對(duì)于當(dāng)前元素字體尺寸，即font-size。舉例來(lái)說(shuō)，如果當(dāng)前元素的字體是20px，那么當(dāng)前元素中的1em就等于20px。
h1 { font-size: 20px } /* 1em=20px */
p { font-size: 16px } /* 1em=16px */
實(shí)際開(kāi)發(fā)中，用相對(duì)長(zhǎng)度單位（如 em）表示字體大小是WEB開(kāi)發(fā)中的最好的選擇。請(qǐng)看下面的代碼：
h1 { font-size: 2em }
這里的h1元素字體大小究竟是多少呢？
這時(shí)，我們需要根據(jù)<h1>父元素字體的大小，來(lái)計(jì)算<h1>字體的尺寸大小。如果父元素是<html>，而且<html>的字體大小是16px。就可以計(jì)算出<h1>的字體大小是32px，即2*16px。
用代碼表示如下：
html { font-size: 16px }
h1 { font-size: 2em } /* 16px * 2=32px */
設(shè)置<html>字體的大小一般來(lái)說(shuō)都不是一個(gè)好主意，因?yàn)檫@樣重寫(xiě)了用戶瀏覽器的默認(rèn)設(shè)置。相反，可以使用百分比值或者根本不聲明<html>字體大小
html { font-size: 100% } /* 缺省 16px */
對(duì)于大多數(shù)用戶或?yàn)g覽器，字體缺省大小是16px（未做瀏覽器缺省字體尺寸設(shè)置）。
em 還能用來(lái)指定除字體大小外的其它屬性，象margin或padding等屬性都可以用em來(lái)表示。
看下面的代碼， 對(duì)于<h1>和<p>元素，margin-bottom值應(yīng)該是多少？ （假設(shè)<html>的字號(hào)被設(shè)置為100％）
h1 {
font-size: 2em; /* 1em=16px */
margin-bottom: 1em; /* 1em=32px */
}
p {
font-size: 1em; /* 1em=16px */
margin-bottom: 1em; /* 1em=16px */
}
上述<h1>和<p>的margin-bottom都是1em，但是外邊距結(jié)果值卻不相同。上述現(xiàn)象的出現(xiàn)，是因?yàn)閑m是相對(duì)于當(dāng)前元素字體的大小。由于<h1>中的字體大小現(xiàn)在設(shè)置為2em， 因此<h1>中其它屬性的1em值就是 1em= 32px。這里比較容易引起誤解的地方。
rem表示 root em，它是相對(duì)于根元素的長(zhǎng)度單位。這里根元素就是<html>中定義的字體大小。這意味著任何地方的1rem總是等于<html>中定義的字體大小。
利用上述相同的代碼，我們用 rem 來(lái)代替 em，查看margin-bottom的計(jì)算值究竟是多少？
h1 {
font-size: 2rem;
margin-bottom: 1rem; /* 1rem=16px */
}
p {
font-size: 1rem;
margin-bottom: 1rem; /* 1rem=16px */
}
如上述代碼所示，1rem總是等于16px（除非變更了<html>字體的大小）。rem的大小相較于em來(lái)說(shuō)意義更直接明確，也很容易理解。
在項(xiàng)目開(kāi)發(fā)中究竟是選用 rem 還是 em 一直以來(lái)爭(zhēng)議不斷。一些開(kāi)發(fā)人員不使用rem，因?yàn)閞em使組件不那么模塊化。而另一些開(kāi)發(fā)人員喜歡rem的簡(jiǎn)單性，使用rem處理所有元素。
其實(shí) em和rem都有各自的優(yōu)勢(shì)和劣勢(shì)，在實(shí)際項(xiàng)目開(kāi)發(fā)中，應(yīng)該結(jié)合使用兩者，利用各自的優(yōu)勢(shì)，從而實(shí)現(xiàn)較好代碼質(zhì)量和顯示效果。
那么在具體的應(yīng)用中如何在兩者中做選擇呢？有兩條簡(jiǎn)單的指導(dǎo)原則：
上述規(guī)則太簡(jiǎn)單了。 為了更好的理解上述規(guī)則，我們就以一個(gè)簡(jiǎn)單的header組件為例，說(shuō)明單獨(dú)使用兩者來(lái)實(shí)現(xiàn)組件遇到的問(wèn)題，并體會(huì)結(jié)合使用兩者所帶來(lái)的優(yōu)勢(shì)。
這里我們只使用rem來(lái)編寫(xiě)一個(gè)header組件，代碼及運(yùn)行結(jié)果如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
web開(kāi)發(fā)中該用 em 還是 rem 呢？
接下來(lái)，網(wǎng)站需要一個(gè)尺寸更大的header組件。變更CSS代碼如下：
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
web開(kāi)發(fā)中該用 em 還是 rem 呢？
從上述運(yùn)行結(jié)果可以看出，文字的內(nèi)邊距（padding）過(guò)小，顯示效果不協(xié)調(diào)。如果我們堅(jiān)持只使用rem，只能變更c(diǎn)ss代碼如下:
.header {
font-size: 1rem;
padding: 0.5rem 0.75rem;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
padding: 1rem 1.5rem;
}
web開(kāi)發(fā)中該用 em 還是 rem 呢？
上述代碼及運(yùn)行結(jié)果，雖然達(dá)到了預(yù)期的顯示效果，但卻違背了代碼復(fù)用的原則。如果網(wǎng)站有多種尺寸的.header樣式，就要多次重復(fù)的定義內(nèi)邊距。重復(fù)的代碼增加了項(xiàng)目復(fù)雜度，降低了可維護(hù)性。
這時(shí)可以利用em可以變更上述代碼如下：
.header {
font-size: 1rem;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2rem;
}
當(dāng)元素屬性值的大小需要根據(jù)元素字體尺寸縮放時(shí)，就應(yīng)該應(yīng)用 em 來(lái)定義屬性尺寸。這就是前述規(guī)則中的第一條規(guī)則。
如果只使用em來(lái)定義上述組件，結(jié)果會(huì)怎樣呢？
我們變更上述代碼如下（em替換rem）：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
p {
padding: 0.5em 0.75em;
}
為更接近實(shí)際，我們引入了<p>元素，并變更html代碼如下：
div class="header header-large">名人名言</div> <p>簡(jiǎn)單是穩(wěn)定的前提</p> <div class="header">名人名言</div> <p>簡(jiǎn)單是穩(wěn)定的前提</p>
web開(kāi)發(fā)中該用 em 還是 rem 呢？
從上述運(yùn)行經(jīng)果中，不難看出.header-large部分的標(biāo)題并沒(méi)有和文本左對(duì)齊。而如果只使用em實(shí)現(xiàn)左對(duì)齊，則需要變更CSS代碼如下：
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
padding-left: 0.375em;
padding-right: 0.375em;
}
web開(kāi)發(fā)中該用 em 還是 rem 呢？
上述代碼及運(yùn)行結(jié)果，雖然達(dá)到了預(yù)期的顯示效果，但卻違背了代碼復(fù)用的原則。如果網(wǎng)站有多種尺寸的.header樣式，就要多次重復(fù)的定義左右邊距。重復(fù)的代碼增加了項(xiàng)目復(fù)雜度，降低了可維護(hù)性。
解決上述問(wèn)題的辦法是結(jié)合使用em和rem，即使用em定義上下邊距，使用rem定義左右邊距。變更后代碼如下：
.header {
padding: 0.5em 0.75rem;
font-size: 1em;
background: #7F7CFF;
}
.header-large {
font-size: 2em;
}
究竟是該使用em還是rem呢？答案應(yīng)該是結(jié)合使用rem和rem。當(dāng)屬性值的大小需要根據(jù)當(dāng)前元素字體尺寸縮放時(shí)，就選用em，其它的情況都使用更簡(jiǎn)單的rem。
最后提供小技巧：em及rem值的設(shè)定
em和rem 屬性值都要經(jīng)過(guò)計(jì)算轉(zhuǎn)化成絕過(guò)長(zhǎng)度單位。常用的字體尺寸用相對(duì)長(zhǎng)度單位表示會(huì)很困難。看下面常用字體值的rem表示（基本字體尺寸是16px）：
如上述列表所示，上述尺寸值的表示及計(jì)算都不分的不便。為了解決上述問(wèn)題要用到一個(gè)小技巧，即著名的 "62.5%"技術(shù)。具體請(qǐng)查看下述代碼：
body { font-size:62.5%; } /*=10px */
h1 { font-size: 2.4em; } /*=24px */
p { font-size: 1.4em; } /*=14px */
通過(guò)62.5%的設(shè)定，就可以很容易用em來(lái)定義具體屬性的尺寸了（10倍的關(guān)系）。
而rem，則需要采用如下的方式：
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
