CSS 小结笔记之em
1、為什么使用em
em也是css中的一種單位，和px類似。很多人會(huì)疑惑為什么有了px之后還要使用em，而且em使用起來相對(duì)于px來講比較麻煩。
em主要是應(yīng)用于彈性布局，下面給出一個(gè)小栗子說明em的強(qiáng)大之處
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.top {height: 80px;background-color: black;}.main {width: 960px;background-color: #ccc;margin: 0 auto;overflow: hidden;}.left {width: 30%;height: 100%;background-color: aqua;border: 1px solid red;float: left;font-size: 16px;line-height: 18px;}.right {width: 60%;height: 100%;font-size: 1em;line-height: 1.125em;background-color: deeppink;border: 1px solid red;float: right;}</style> </head><body><div class="top"></div><div class="main"><div class="left"><ul><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li><li>em測(cè)試用例，沒有em的情況</li></ul></div><div class="right"><ul><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li><li>em測(cè)試用例有em的強(qiáng)大之處</li></ul></div></div> </body></html> View Code這里模仿了一個(gè)網(wǎng)頁的大致布局，給出使用em和px的區(qū)別。
在正常情況下，em和px看起來沒什么區(qū)別。如下圖
接下來，按住ctrl鍵并連續(xù)按 ‘-’（減號(hào)）鍵，對(duì)頁面不斷進(jìn)行縮小。縮小到25%時(shí)會(huì)出現(xiàn)很明顯的差別（這里使用的是chrome瀏覽器，其他瀏覽器如果沒有這種狀況，可以在瀏覽器中手動(dòng)去改動(dòng)字體大小，在增大字體的情況下可以看出類似的情況發(fā)生）具體如下圖
可以看到使用px的左邊已經(jīng)完全崩潰了，看不出來具體的文字了。而右邊使用em的仍然可以清楚的看到文字。造成這種現(xiàn)象的主要原因是em是相對(duì)大小，使用em時(shí)對(duì)頁面進(jìn)放大或縮小不會(huì)造成太大的影響。
既然是相對(duì)大小，那么就會(huì)有參考大小，em的參考大小是當(dāng)前元素的字體大小。這時(shí)又會(huì)引發(fā)一個(gè)問題，既然是當(dāng)前元素的字體大小作為參考，那么當(dāng)前字體以em為單位時(shí)又是以什么作為參考呢？這時(shí)是以其父級(jí)元素的字體大小作為參考。
因此當(dāng)整個(gè)頁面都是使用em作為字體大小的情況下，頁面中的1em就是瀏覽器默認(rèn)的字體大小為16px;
2、em的具體使用：
1、設(shè)置body{font-size：1em}?
在設(shè)置好body的字體大小的情況下，由于body字體是繼承瀏覽器默認(rèn)是16px，那么這時(shí)只要網(wǎng)頁上全是用em，那么1em=16px；
2、開始計(jì)算元素具體需要的大小
（1）如果元素的字體大小是繼承于上層即16px，那么在元素內(nèi)部1em=16px；因此計(jì)算方法如下
需要的em值=當(dāng)前元素的px值/父元素的字體大小值px（一般是16px）
例如：1px=1/16=0.0625em，18px=18/16=1.125em
（2）如果元素的字體大小是自己設(shè)置的
當(dāng)前元素的字體大小的em值=當(dāng)前元素字體大小px/父元素字體大小px
當(dāng)前元素需要的其他em值=當(dāng)前元素的px值/元素自身的字體大小px
下面通過一個(gè)例子進(jìn)行具體的解釋
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {font-size: 1em;}.son1 {font-size: 2em;height: 5em;width: 5em;border: 0.0625em solid red;background-color: aqua;margin: 0 auto;}.son2 {font-size: 32px;height: 160px;width: 160px;border: 2px solid red;background-color: aqua;margin: 100px auto;}</style> </head><body><div class="fa"><div class="son1">aaa son1</div><div class="son2">aaa son2</div></div> </body></html>?
打開瀏覽器中顯示的.son1盒子的盒子模型，以及網(wǎng)頁結(jié)果圖具體入下
可以發(fā)現(xiàn).son1 和.son2 一模一樣。
.son1 的字體大小為 2em 對(duì)應(yīng)的px為 2*16=32px；（反過來可以驗(yàn)證公式?當(dāng)前元素的字體大小的em值（2）=當(dāng)前元素字體大小px（32）/父元素字體大小px（16））
高度寬度為5em 對(duì)應(yīng)px為 5*32=160px；（反過來可以驗(yàn)證公式當(dāng)前元素需要的其他em值（5）=當(dāng)前元素的px值（160）/元素自身的字體大小px（32））
注意：在ie5/6中還需要添html { font-size：100%} 以保證彈性布局（但是目前ie5/6基本沒有，而且這條是根據(jù)文章?《The Incredible Em & Elastic Layouts with CSS》?得知的,本人并沒有試出來具體問題在哪。。先記下，以后遇到類似情況使用）
?
3、rem的使用
rem使用方法和em類似，不過rem是相對(duì)于根元素的大小（即html的字體大小），而不是自身的大小。2中的栗子中的.son1 的相關(guān)帶em的屬性全改為rem 代碼如下
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=\, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.son1 {font-size: 2rem;height: 5rem;width: 5rem;border: 0.0625rem solid red;background-color: aqua;margin: 0 auto;}.son2 {font-size: 32px;height: 160px;width: 160px;border: 2px solid red;background-color: aqua;margin: 100px auto;}</style> </head><body><div class="fa"><div class="son1">aaa son1</div><div class="son2">aaa son2</div></div> </body></html> View Code結(jié)果圖為：
?因?yàn)?son1 中的單位全改為rem，參考對(duì)象為html字體的大小即為16px，所以.son1字體大小為2*16=32px??，寬度和高度為5*16=80px，邊框?yàn)?strong>1px
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的CSS 小结笔记之em的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 弹性盒模型--新版与旧版比较（2）
- 下一篇： CSS定义字体间距 字体行与行间距