整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS解析-px、em、rem單位

          CSS解析-px、em、rem單位

          端開發中長度單位有很多,最為常用和熟知的肯定就是px了,隨著前端的不斷發展,em和rem也越來越普及,只用px一把梭的時代早已成為過去。是px過時了嗎?如果對這些單位的使用場景不夠了解,可能就會拿著一個rem從頭梭到尾了。本篇我們來好好梳理一下css中的長度單位以及它們的使用場景,我們要在合適的場景使用合適的單位。

          px

          px是像素點單位,與之線性相關的單位有mm(毫米)、cm(厘米)、in(英寸)、pt(點,印刷術語,1/72英寸)、pc(派卡,印刷術語,12點)。

          1in=25.4mm=2.54cm=6pc=72pt=96px

          em

          em是相對長度單位,適合基于特定的字號進行排版。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

          rem和em很像,其實和em的理念很像,都是相對單位,rem中的r是root,顧名思義,rem是相對一個root元素(一般以html標簽作為根元素)計算值的,不管在文檔的什么位置。

          rem結合了px和em的優先,既保留了相對單位的優勢,又簡單易用可控。那只用rem行嗎?行,也不行。如果你只了解習慣這一個單位,就要充分發揮rem的優勢,全站梭到底也沒什么不行的。但是如果你想寫出簡單好看的css代碼,在不同的場景下使用適當的單位會讓你和你的隊友少趟許多的坑。

          一般情況下,我會使用rem設置字號,用px設置邊框、用em來設置其他大部分的屬性,尤其是內邊距、外邊距、圓角等。這樣字號是可預測的,同時還能在其他因素改變元素字號時,借助em縮放內外邊距。你覺得呢?

          vh、vw、vmin、vmax

          我們先介紹一下概念:

          視口:瀏覽器窗口里網頁可見部分的邊框區域,不包括瀏覽器的地址欄、工具欄、狀態欄。

          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、怎么把一個元素隱藏起來?盡可能多的說出你的解決辦法

          答:

          • display:none;
          • visibility:hidden;
          • width:0px;height:0px;overflow:hidden;
          • 設置透明程度100% opacity 的設置,這樣就透明了,看不見了,就是隱藏了唄
          • input 元素有個 type="hidden" 這樣設置后,input 元素也是不可見的

          4、說一說清除浮動的解決辦法

          答:

          清除浮動是指一個父元素,N個子元素,子元素設置了float:left 這樣父元素如果沒有設置高度的話,父元素就失去了height 。這樣不管子元素有多高,父元素都不能被撐起來。所以清楚浮動問的是怎么把父元素撐起來的問題。

          • 給父元素設置height屬性,這樣就好了,父元素不是沒有高度嘛,設置一個
          • 給父元素設置 overflow:hidden 。浮動的子元素之所以不能把父元素撐起來,是因為子元素設置了float以后,子元素就脫離了本身的文檔結構,給父元素設置overflow:hidden 以后,可以把這個情況改回來。
          • 在子元素同級添加 <div style="clear:both;"></div> clear:both 也是一種清楚浮動的常用方法。

          5、div垂直居中,說出你用過的解決方案

          答:

          <div class="dd">書軟</div>

          • .dd{width:20px;height:20px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
          • .dd{width:500px;height:500px;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:250px;}

          6、兩個a標簽之間出現間隙的情況遇到過嗎?怎么解決的

          答: 寫html代碼的時候,如果兩個a標簽出現換行,就會有間隙,可以不換行,寫到一行,間隙就沒了;也可以設置 display:inline-block 然后設置一定量的margin 負值,這樣也是可以消除間隙的。

          7、請寫出css中 px em rem vw 的使用

          答: 這里不做詳細的解說了啊,前面的文章我們有一節說的很詳細了,可以再去看一遍。小伙伴如果覺得還不是很清楚,就去看看文章,再電腦上敲一敲代碼。面試的時候一定不能背書,要總結出自己的一套說辭,這樣才能更顯得是你的經驗之談。面試官也怕丟人,面試的時候人家比自己懂得太多不行,所以有一些問題你能說出大概他就不往深里問了。當然,也不排除他覺得你懂得多,看你不順眼,就使勁兒難為你的。

          8、從css角度說說,如何優化你的網頁

          答:

          • 盡量少的寫行內和頁內樣式,因為瀏覽器每次刷新會緩存css文件中的樣式,但行內和頁內樣式不會被緩存,會每次都加載
          • css樣式含有公共部分的要抽離出來,書寫的時候盡量寫一行,而不是多行,這樣可以減小css文件的體積
          • css測試完成以后,上線以后可以進行壓縮,壓縮后可以把多個css文件壓縮得更少,甚至壓縮成一個,這樣可以減少http請求數量,也是加速頁面渲染的一種方法
          • 使用圖片精靈,意思就是把項目中的小圖標用ps做到一張大圖片中,css中使用圖片的時候,通過background-position 去定位找到自己需要的小圖標,這樣也是減少http請求的做法。

          9、關于css盒模型

          答: 這個問題也很常見,這個問題不清楚的回去看文章啊,前面有一節說這個問題的文章,在電腦上試一試,在紙上畫一畫,體會體會,這里不做詳細解說了。

          擊右上方紅色按鈕關注“web秀”,讓你真正秀起來!

          簡言

          em 和 rem這種相對長度單位進行頁面排版是web開發中的最好的選擇。在頁面排版中較好應用em 和 rem,根據設備尺寸縮放顯示元素的大小。這就使得組件在不同設備上都達到最佳的顯示效果成為可能。

          web開發中該用 em 還是 rem 呢?


          但問題是究竟該用 em 還是 rem 呢?關于這個問題一直存在比較大的爭議。本文將會給大家介紹究竟什么是 em 和 rem 和如何進行兩者的選擇,以及結合兩者優勢構建模塊化的web組件。

          什么是em

          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

          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 還是 em 一直以來爭議不斷。一些開發人員不使用rem,因為rem使組件不那么模塊化。而另一些開發人員喜歡rem的簡單性,使用rem處理所有元素。

          其實 em和rem都有各自的優勢和劣勢,在實際項目開發中,應該結合使用兩者,利用各自的優勢,從而實現較好代碼質量和顯示效果。

          那么在具體的應用中如何在兩者中做選擇呢?有兩條簡單的指導原則:


          • 如果屬性尺寸要根據元素字體進行縮放,則使用em
          • 其它情況下都使用rem


          上述規則太簡單了。 為了更好的理解上述規則,我們就以一個簡單的header組件為例,說明單獨使用兩者來實現組件遇到的問題,并體會結合使用兩者所帶來的優勢。


          只使用rem

          這里我們只使用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來定義上述組件,結果會怎樣呢?

          我們變更上述代碼如下(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值的設定

          em和rem 屬性值都要經過計算轉化成絕過長度單位。常用的字體尺寸用相對長度單位表示會很困難??聪旅娉S米煮w值的rem表示(基本字體尺寸是16px):

          • 10px=0.625rem
          • 12px=0.75rem
          • 14px=0.875rem
          • 16px=1rem (base)
          • 18px=1.125rem
          • 20px=1.25rem
          • 24px=1.5rem
          • 30px=1.875rem
          • 32px=2rem

          如上述列表所示,上述尺寸值的表示及計算都不分的不便。為了解決上述問題要用到一個小技巧,即著名的 "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,則需要采用如下的方式:


          主站蜘蛛池模板: 久久99久久无码毛片一区二区| 精品国产一区二区三区| 亚洲综合av永久无码精品一区二区| 国产在线观看一区二区三区精品| 亚洲一区免费观看| 亚洲一区视频在线播放| 人妻互换精品一区二区| 欧洲无码一区二区三区在线观看 | 无码人妻精品一区二区三区夜夜嗨 | 国产一区在线视频| 福利一区福利二区| 日韩AV无码一区二区三区不卡| 国产爆乳无码一区二区麻豆| 久久国产高清一区二区三区| 精品无码中出一区二区| 国产一区二区久久久| 精品欧洲av无码一区二区14| 亚洲日本一区二区| 亚洲福利视频一区| 亚洲一区二区三区深夜天堂| 亚洲AV福利天堂一区二区三| 秋霞午夜一区二区| 国产激情无码一区二区| 国精品无码一区二区三区在线 | 国产成人精品一区二三区| 亚洲AV成人一区二区三区观看| 国产精品亚洲午夜一区二区三区 | 天堂成人一区二区三区| 亚洲精品日韩一区二区小说| 99久久无码一区人妻a黑| 波多野结衣久久一区二区| 亚洲一区二区无码偷拍| 国模无码视频一区二区三区| 国产一区中文字幕在线观看| 一区二区三区中文| 中文字幕色AV一区二区三区| 麻豆AV一区二区三区| 亚洲一区AV无码少妇电影| 亚洲AV无码一区二区三区牲色 | 亚洲AV一区二区三区四区| 国产伦精品一区二区三区免.费|