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就可以点击到了!!!
- 如果你觉得加了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等分辨率差别比较挺大的设备。