1、你最喜欢的图片替换方法是什么，你如何选择使用。

图像替代，就是像我们在平时将文本添加到文本中，然后通过css隐藏文本并在它的位置上显示一个背景图片，这样，搜索引擎仍然可以搜到HTML文本，即使我们禁用css后，文本仍然是可以显示的。

图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。

使用图片替换文本，其原理是相当的简单：就是在样式中使用背景图片来替换掉HTML模板中的文本内容，从而达到一种样式无法实现的页面渲染效果。

a) FIR(Fahrner Image Replacement)方法

当图片无法显示时，将导致这个区域没有任何内容。同时，使用 display:none 的方式隐藏的内容，将被许多主流屏幕阅读器忽略，从而造成可用性问题，因此，应该尽量避免使用。

<h1 id="FIR">
　　<a href="http://www.mamicode.com/#">FIR Measure</a>
</div>

#FIR{
　　width:300px;
　　height:200px;
　　background-img:url("fir.png");
}
#FIR a{
　　display:none;
}

b) Phark方法

text-indent属性，并且给其设置一个较大的负值，达到隐藏文本的效果。这种方法简单易懂而且支持阅读器之类浏览网页。当图片无法显示时，依然存在 FIR 的问题。

<h1 id="mir">MIR Measure</h1>

#mir{
    width:300px;
    height:200px;
    background-img:url("mir.png");
    text-indent:-5000px;
}

c)

通过把span的大小都设置为“0”，来达到隐藏文本效果，这样阅读器就能完全阅读到，而且又达到了图片替换文本的效果。

<h1 id="thirdMeasure">
    <span>the third measure</span>
</h1>

#thirdMeasure{
    width:300px;
    height:200px;
    background-img:url("3rd.png");
}
#thirdMeasure span{
    display:block;
    width:0;
    height:0;
    font-size:0;
    overflow:hidden;
}

d)

将 h1 的 position 设为 relative ，这样将使 h1 里面的元素定位以h1 为参照，然后将span 元素绝对定位，撑满整个 h1 区域，同时将背景图应用在 span 标签里面；这种方法的原理是将 span 标签覆盖在文字内容上面，一旦 span 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。

<h1 id="4thMeasure">
    <span></span>the fourth Measure
</h1>

#4thMeasure{
    width:300px;
    height:200px;
    position:relative;
}
span{
    position:absolute;
    width:100%;
    height:100%;
    background-img:url(4th.png);
}

更多图片替换方法：http://www.w3cplus.com/css/ten-image-replace-text-with-css

2、有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）

需要隐藏内容的几种可能性：  

1）对文本的隐藏

　a)对于块级元素或者display:block的元素text-indent:-9999px;

　text-indent是首行缩进，所以对于多行文本，若单独使用它就有明显的不足，需加上white-space:nowrap;来弥补不足，但还有一个问题：物理空间仍然存在，故还需设置line-height:0;或使用超小字体

　　(在IE下有点BUG)，最终代码如下: 

.texthidden{ 
　　　text-indent:-9999px; 
　　　white-space:nowrap; 
　　　line-height:0; 
} 

　b)　

.texthidden{
    display:block
    width:0;
    height:0;
    overflow:hidden;  
}

　c) display:none

　　使包括容器本身在内的东西都消失，简便且有效，但它有两个耳熟能详的缺陷，那就是对搜索引擎不友好，且被屏幕阅读器所忽略。

2）隐藏超链接（另类黑链）

3）对统计代码隐藏

4）隐藏超出图片

　　overflow:hidden

5）css隐藏滚动条

　　overflow-x:hidden;overflow-y:hidden;

6）css隐藏div层

　　display:none;或者visibility:hidden;

3、媒体查询

使用媒体查询时，首先要设置meta标签，来兼容移动设备的展示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• width = device-width：宽度等于当前设备的宽度

• initial-scale：初始的缩放比例（默认设置为1.0）  

• minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    

• maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   

• user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） 

然后要加载兼容JS文件

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>

　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

 　  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

<![endif]-->

最后就可以开始写媒体查询语句了

@media screen and (min-width:960px) and (max-width:1200px){
　　body{
　　　　background:yellow;
　　}
}

4、如何优化网页的打印样式？

<link rel="stylesheet" type="text/css" media="screen" href="http://www.mamicode.com/xxx.css" />
其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。
<link rel="stylesheet" type="text/css" media="print" href="http://www.mamicode.com/yyy.css" />
但打印样式表也应有些注意事项：
1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3、隐藏掉不必要的内容。（@print div{display:none;}）网站上或许有不少页面元素在打印版本上完全没有用,像是导航链接,侧边栏,
表单以及广告栏之类的元素在打印时经常只会浪费墨水,我们可以在打印样式表内使用display属性将它们设为不显示.使用者经常只想打印页面的内容.
4、打印样式表中最好少用浮动属性，因为它们会消失。

5、揭露链接

6、突现链接文字
7、如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。
http://blog.csdn.net/xujie_0311/article/details/42271273

5、在书写高效 CSS 时会有哪些问题需要考虑？

1）尽量将样式写在单独的css文件里面，在head元素中引用（好处：内容和样式分离，易于管理和维护；减少页面体积；css文件可以被缓存、重用，维护成本降低）

2）不使用@import，@import影响css文件的加载速度

3）避免使用复杂的选择器，层级越少越好；有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂。建议选择器的嵌套最好不要超过三层。

@font-face{
 　 font-family : name ; 
　　src : url( url ) ; 
　　sRules
}

@font-face {
    /* font-properties */
    font-family: pictos;
    src:url(‘pictos/pictos-web.woff‘),  /* 网页所采用的字体格式标准 */ 
　　url(‘pictos/pictos-web.ttf‘), 
　　url(‘pictos/pictos-web.eot‘); /* 老版本IE */ }

body.ready .container .cl{
    background-color:pink;
}

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}
<div class="space">
    <a href="http://www.mamicode.com/##">惆怅</a>
    <a href="http://www.mamicode.com/##">淡定</a>
    <a href="http://www.mamicode.com/##">热血</a>
</div>

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

<div style="font-size:14px;">
    <p style="font-size:16px;">something about line-height</p>
</div>

CSS面试题总结2（转）