久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

01
2017/04

CSS中px和em的區(qū)別

發(fā)布時(shí)間:2017-04-01 10:49:18
發(fā)布者:jinchao
瀏覽量:
0

今天說(shuō)一個(gè)經(jīng)常用,但是沒(méi)注意的問(wèn)題,在設(shè)置字體大小的時(shí)候我們可以用px也可以用em,但是px與em到底有什么差別呢,今天我們來(lái)說(shuō)一下。

px像素(Pixel):

px是相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。

em:

em也是相對(duì)長(zhǎng)度單位,是相對(duì)于當(dāng)前字體大小的尺寸,這個(gè)字體可以是設(shè)置的,也可以是繼承的。如果沒(méi)設(shè)置,就是相對(duì)于瀏覽器默認(rèn)的字體大?。?6px)。

px與em的區(qū)別:

1.em的值并不是固定的,是根據(jù)當(dāng)前字體的大小而定,1em就是當(dāng)前字體的大小。而px的大小是固定。

2.em可以繼承自父容器,而px不行。

3.在IE中px的字體是不能夠改變大小的(在IE上方點(diǎn)擊 查看 > 文字大小)。

實(shí)例效果






文匯軟件 
 
ul li{list-style-type:none; } 
.em{font-size:2em;} 
.px{font-size:32px; } 
 
 
 
        我的大小是2em    我的大小是32px 
   

QQ截圖20170401104328.png

以上代碼中,由于沒(méi)有進(jìn)行特別的字體設(shè)置,所以"我的大小是2em"的字體大小就繼承了瀏覽器的默認(rèn)設(shè)置,即1em=16px,那么2em也就等于32px。下面就看一個(gè)不是默認(rèn)16px的情況,代碼如下:






文匯軟件 
 
ul li{list-style-type:none; } 
.first{font-size:12px;} 
.em{font-size:2em;} 
.px{font-size:32px;} 
.test{font-size:24px;} 
 
 
 
 
  我的字體大小是2em 
 
    我的字體大小是32px 
 
    我的字體大小是24px 
   

QQ截圖20170401104749.png

以上代碼中由于設(shè)置了類(lèi)名為first的div中的字體大小為12px,那么在此div之內(nèi)的1em就等于12px。而第二個(gè)div依然是使用默認(rèn)的字體大小16px。第三個(gè)div內(nèi)的span中的字體大小設(shè)置為24px。

關(guān)鍵詞:
返回列表
相關(guān)文章
相關(guān)案例