1. 以圖換字的幾種方法，及優(yōu)缺點(diǎn)定枷？
- 首先工秩，這樣的問(wèn)題只有在：想保留鏈接的背景，但又要鏈接里的文字消失个初！這種情況下才用的多
- 然后怎么解決呢？
1.讓文字包裹層display:none方法猴蹂，代碼如下
1 <style>
2 #logo a {background:url(test.jpg) no-repeat; width:195px; height:210px; display:block;}
3 #logo a span {display:none;}
4 </style>
5 <div id="logo">
6 <a href="URL" title="團(tuán)購(gòu)最低價(jià)院溺，越團(tuán)越便宜">
7 <span>團(tuán)購(gòu)最低價(jià)，越團(tuán)越便宜</span>
8 </a>
9 </div>
注意幾點(diǎn)：a標(biāo)簽要設(shè)置display:block磅轻，是因?yàn)閍是inline元素珍逸，寬高由內(nèi)容決定逐虚，現(xiàn)在文字display:none了，沒(méi)有寬高了谆膳，所以這樣會(huì)導(dǎo)致這個(gè)鏈接也就成了一個(gè)沒(méi)有熱區(qū)的鏈接了叭爱，點(diǎn)不到了。所以設(shè)置display:block就可以點(diǎn)擊到了Ｊ Ｂ蛭怼！
- 如果你覺(jué)得加了span標(biāo)簽覺(jué)得多余杨帽，可以考慮下面這種方法：
代碼：
1 <style>
2 #logo, #logo a {width:195px; height:21px;overflow:hidden; }
3 #logo a {background:url(test.jpg) no-repeat; padding-left: 195px; display:block;}
4 </style>
5 <div id="logo"><a href="URL" title="團(tuán)購(gòu)最低價(jià)漓穿，越團(tuán)越便宜">團(tuán)購(gòu)最低價(jià)，越團(tuán)越便宜</a></div>
原理; 利用paading把文字內(nèi)容擠出容器注盈，父元素注意添加overflow:hidden;
2. px和em和rem的區(qū)別晃危？？
px:像素單位老客，是相對(duì)于屏幕分辨率而言的相對(duì)長(zhǎng)度單位僚饭。
特點(diǎn)：
- px設(shè)置字體大小時(shí)，比較穩(wěn)定和精確沿量。
存在的問(wèn)題浪慌，用戶瀏覽網(wǎng)頁(yè)，對(duì)頁(yè)面進(jìn)行縮放朴则，就會(huì)使Web布局打破权纤。
em:也是相對(duì)長(zhǎng)度單位
特點(diǎn)：
- 相對(duì)于父級(jí)元素內(nèi)的字體大小再進(jìn)行計(jì)算得出的。
注意的問(wèn)題：在使用em作為單位時(shí)乌妒，body選擇器中聲明Font-size=62.5%汹想；
rem:CSS3新增的一個(gè)相對(duì)單位（root em，根em）撤蚊，和em的區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)古掏，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素侦啸。
特點(diǎn)：
既可以做到只修改根元素就成比例地調(diào)整所有字體大小槽唾，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。除了IE8及更早版本外光涂，所有瀏覽器均已支持rem庞萍。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單忘闻，就是多寫(xiě)一個(gè)絕對(duì)單位的聲明钝计。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。例：
p {font-size:14px; font-size:.875rem;}
注意的問(wèn)題：選擇使用什么字體單位主要由你的項(xiàng)目來(lái)決定，如果你的用戶群都使用最新版的瀏覽器私恬，那推薦使用rem债沮，如果要考慮兼容性，那就使用px,或者兩者同時(shí)使用本鸣。
px 與 rem 的選擇疫衩？
對(duì)于只需要適配少部分手機(jī)設(shè)備，且分辨率對(duì)頁(yè)面影響不大的永高，使用px即可 隧土。
對(duì)于需要適配各種移動(dòng)設(shè)備，使用rem命爬，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備曹傀。
