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