前端面试题整理总结,第七篇

1. 以图换字的几种方法，及优缺点？

• 首先，这样的问题只有在：想保留链接的背景，但又要链接里的文字消失！这种情况下才用的多
• 然后怎么解决呢？
  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="团购最低价，越团越便宜">
7         <span>团购最低价，越团越便宜</span>
8     </a>
9 </div>

注意几点：a标签要设置display:block，是因为a是inline元素，宽高由内容决定，现在文字display:none了，没有宽高了，所以这样会导致这个链接也就成了一个没有热区的链接了，点不到了。所以设置display:block就可以点击到了！！！

2. 如果你觉得加了span标签觉得多余，可以考虑下面这种方法：
   代码：

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="团购最低价，越团越便宜">团购最低价，越团越便宜</a></div> 

原理; 利用paading把文字内容挤出容器，父元素注意添加overflow:hidden;

2. px和em和rem的区别？？

px:像素单位，是相对于屏幕分辨率而言的相对长度单位。
特点：

• px设置字体大小时，比较稳定和精确。
  存在的问题，用户浏览网页，对页面进行缩放，就会使Web布局打破。

em:也是相对长度单位
特点：

• 相对于父级元素内的字体大小再进行计算得出的。
  注意的问题：在使用em作为单位时，body选择器中声明Font-size=62.5%；

rem:CSS3新增的一个相对单位（root em，根em），和em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
特点：
既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。例：
p {font-size:14px; font-size:.875rem;}
注意的问题：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px 与 rem 的选择？
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。