深入理解CSS中em, rem, ex區(qū)別，及使用技巧

lbool 發(fā)布于2019-08-29 16:44 / 2602人閱讀

摘要：中常見尺寸單位描述百分比英寸厘米毫米一個是一個字體的。在中，是非常有用的單位，因為它可以自動適應(yīng)用戶所使用的字體。在中唯一例外的是屬性，它的和值指的是相對父元素的字體大小。

CSS 中常見尺寸

單位	描述
%	百分比
in	英寸
cm	厘米
mm	毫米
ex	一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 點活字 (1 pc 等于 12 點)
px	像素 (計算機屏幕上的一個點)
em	1em 等于當前的字體尺寸。 2em 等于當前字體尺寸的兩倍。例如，如果某元素以 12pt 顯示，那么 2em 是24pt。在 CSS 中，em 是非常有用的單位，因為它可以自動適應(yīng)用戶所使用的字體。
rem	rem表示“Root EM”,字面上指的是根元素的em大小。在Web文檔的上下文中，根元素就是你的html元素。如果沒有重置，html默認font-size:16px。

em 和 rem 比較

單位	特點
em	相對單位em是相對于元素本身的字體大小的。在css中唯一例外的是font-size屬性，它的em和ex值指的是相對父元素的字體大小。
rem	集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免（使用em）字體大小逐層復(fù)合的連鎖反應(yīng)

em 缺點

em 的值并不是固定的；

em 會繼承父級元素的字體大小。

舉例

body{
  font-size: 10px;
}

h2{
  display: block;
  width: 80%;
  font-size: 1.5em;
  margin: 0.5em;
}

h2的字體大小繼承了body字體， 10px * 1.5 = 15px 
h2的margin屬性則是相對于本元素字體大小： 15px * 0.5 = 7.5px
 如下圖所示

rem 使用小技巧


body選擇器中聲明Font-size=62.5%;

將你的原來的px數(shù)值除以10，然后換上rem作為單位；

參考文章鏈接

css中單位em和rem
徹底弄懂css中單位px和em,rem的區(qū)別

GPU云服務(wù)器云服務(wù)器深入理解系列 html中使用css css中使用cdn 深入理解linux

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113948.html

登陸后可評論

我要關(guān)注我要私信

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说