总纲：前端面试知识点大全
目录
9.请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
10.请描述伪元素 (pseudo-elements) 及其用途
1.如何为有功能限制的浏览器提供网页？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
2.有哪些的隐藏内容的方法？
display:none；visibility:hidden；overflow:hidden（针对溢出 ）；
3.栅格系统 (grid system)
栅格系统就是将页面等分成固定数量的列与行，然后在每个格子中进行布局设计。
3.1 Bootstrap
目前主流的栅格系统UI框架就是bootstrap。它将页面分成12列，根据屏幕的大小分成lg、md、sm和xs四个等级，用以响应式的适配所有设备。
在后面的章节中会讲到。
3.2 Grid布局
还有一种就是新的布局方式，也称之为grid，样式属性display:grid。可学习下面的链接。
https://www.jianshu.com/p/d183265a8dad
4.你用过媒体查询，或针对移动端的布局CSS 吗？
媒体查询有三个地方可以使用：
1、<link>、<style>等标签带有media属性，用于限定媒体，可以同时接受多个媒体，以逗号隔开
例如：<link href='style.css' media='screen,print'> 该属性默认值是‘all’
2、@import 后面的参数就是用于限制媒体的
例如：@import url('style.css') screen,print
3、@media 语法：@media mediatype and|not|only (media feature) {CSS-Code;}
例如：@media screen and (max-width: 500px){...}
主要使用到的媒体元素有screen(PC屏幕)、print（打印机）、speech（屏幕阅读器），媒体功能有max-height、max-width、min-height、min-width等
具体参数参考菜鸟教程：http://www.runoob.com/cssref/css3-pr-mediaquery.html
移动端由于分辨率等问题不适合使用px这种单位，推荐使用em或者rem单位。
em：是相对于当前对象内文本的font-size。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
rem：相对于根据html元素的font-size来计算大小，通常默认为16px
5.如何优化网页的打印样式？
使用媒体查询导入专门针对打印机的样式。(print)
1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3、隐藏掉不必要的内容。（@print div{display:none;}）
4、打印样式表中最好少用浮动属性，因为它们会消失。
5、揭露链接
6、突现链接文字
7、如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。
6.在书写高效 CSS 时会有哪些问题需要考虑？
1.浏览器是从右向左来解析一个选择器的
2.ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify（永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
5.提取公共样式，提高复用率
6.CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
7.尽量使用安全颜色，属性缩写，样式初始化，浏览器兼容问题，class和id命名的规范性。
7.使用 CSS 预处理器的优缺点有哪些？
目前主流的css预处理器包括Sass、Stylus和Less，其中Sass和Stylus是在服务器端运行，而less在客户端运行。Less可以在样式表中使用JavaScript语法，是其突出的优点。他们都是拓展了css语言。
缺点：预编译很容易造成后代选择器的滥用；其次预编译需要编译过程，效率上会低一点
优点：CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
Less学习：http://www.bootcss.com/p/lesscss/
Less学习(简书)：https://www.jianshu.com/p/da1e1ceeae1a
8.如果设计中使用了非标准的字体，你该如何去实现？
1、使用@font-face
@font-face{
font-family:"自己的字体名字，可以随便起，可以不和字体文件名相同";
src:url("下载的字体路径");
}这个是css3的属性，不过css2.1就已经出现了，css3加入了标准
2、使用google API
①Standard 方式：
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Condiment'>
②@import 方式：
@import url(http://fonts.googleapis.com/css?family=Condiment);
③JavaScript 方式：
（通过添加动态脚本并执行来导入字体，代码省略）
3、考虑优雅退化问题，使用系统自带字体。
9.请解释浏览器是如何判断元素是否匹配某个 CSS 选择器？
浏览器解释css的时候是从右往左匹配的：
HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。
在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。
因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。
如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。
逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。
但因为匹配的情况远远低于不匹配的情况，所以逆向匹配带来的优势是巨大的。同时我们也能够看出，在选择器结尾加上「*」就大大降低了这种优势，这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。
简单的来说浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
10.请描述伪元素 (pseudo-elements) 及其用途
10.1 伪类与伪元素
CSS3规定伪元素用::，伪类用:
伪元素：用于将特殊的效果添加到某些选择器上（针对内容）
伪类：通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息。
伪元素 :before :after :first-letter first-line等
伪类 :active :hover :link :visited :focus :first-child等
10.2 区别：
1、伪类与伪元素的根本区别在于它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。
2.一个元素可以同时添加多个伪类，而每一次只能对一个伪元素进行操作。
3.书写形式上的区别，单冒号是伪类，双冒号是伪元素（但这点不能作为绝对区分的点）。