一.CSS篇:
1.什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）？
渐进增强 progressive enhancement：
- 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
- 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
两者的区别：
- 优雅降级是从最复杂的现状开始,并试图减少用户体验的供给;而渐进增强是从最基础的、能够起作用的版本开始,并且不断扩充,以适应未来环境的需求。更合适的说话是,渐进增强是保证基本效果的情况下增强效果,优雅降级是保证最恶劣情况下的基本效果。
2.设计中使用了非标准的字体，该如何处理？
-
a.用图片代替。
-
b.使用一些在线字体库，例如Typekit，Google Webfonts等。
-
c.使用@font-face
3.如何隐藏网页内容，只让它们在屏幕阅读器上使用？
-
a.display：none;
-
b.visibility:hidden;
-
c.overflow:hidden;
-
d.position：absolute;top:-999px;
-
e.opacity:0;
4.CSS引入的方式有哪些？
-
a.使用元素链接外部的样式文件
-
b.在head中使用标签里面书写。
-
c.在css中使用@import标记来导入样式表单
-
d.在DOM中插入style属性。
5.link和@import的区别?
-
a.link属于HTML标签的，而@import只是css提供的一种引入方式。
-
b.link标签还能干其它很多的事，例如定义RSS，rel连接属性。@import只能加载css
-
c.兼容性的差别：@import是CSS2.1提出的，IE5以上的才能识别，link标签无此问题
-
d.link属于html文档中的标签，Dom能够控制，但不能对@import进行Dom操作
6.css属性position的属性值有哪些，描述它们的作用。
-
a.position:static css中所有的position默认属性都是static.例如两个页面中都有同一个div，一个需要决定定位，另一个不需要。那么可以设置为static
-
b.relative相对定位，设置relative之后，就可以设置TRBL("left", "top", "right" 以及 "bottom" ),相对于自己本身的位置进行定位。设置relative，没有TRBL设置，则不会进行任何位置改变。移动之后所占的物理空间还是存在的，相对定位后并不会影响相邻的元素。
-
c.绝对定位absolute 给定absolute之后，会飘出文档流，本身的物理空间也消失了。找最近的设置了relative的元素位置进行参照，没有设置则以祖先元素html为参照。
-
d.fixed绝对定位，相对于浏览器窗口进行绝对定位，同样可以通过TRBL设置位置。
-
e.inherit从父元素中继承position属性。
7.前端页面由哪三层构成，分别是什么？作用是什么？
- 网页分成三个层次，即：结构层、表示层、行为层.
网页的结构层（structural layer）:
- 由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出了描述,但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义:"这是一个文本段."
网页的表示层（presentation layer）:
- 由 CSS 负责创建。CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）:
- 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
8.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏（品）字布局 如何设计?
-
首先划分成头部、body、脚部；
-
实现效果图是最基本的工作，精确到2px；与设计师，产品经理的沟通和项目的参与
-
做好的页面结构，页面重构和用户体验处理hack，兼容、写出优美的代码格式针对服务器的优化、拥抱 HTML5。
9、为什么要初始化CSS样式？
-
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异.当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
-
最简单的初始化方法就是： * {padding: 0; margin: 0;} 。
10、 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下）
-
(Q1) 行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。
-
(Q2) 兼容性：display:inline-block;*display:inline;*zoom:1;
11、 清除浮动有哪些方式？比较好的方式是哪一种？
(Q1)
-
(1)父级div定义height。
-
(2)结尾处加空div标签clear:both。
-
(3)父级div定义伪类:after和zoom。
-
(4)父级div定义overflow:hidden。
-
(5)父级div定义overflow:auto。
-
(6)父级div也浮动，需要定义宽度。
-
(7)父级div定义display:table。
-
(8)结尾处加br标签clear:both。
(Q2)
- 比较好的是第3种方式，好多网站都这么用。
12、display有哪些值？说明他们的作用。
-
block:块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
-
none:缺省值。象行内元素类型一样显示。
-
inline:行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
-
inline-block:默认宽度为内容宽度，可以设置宽高，同行显示。
-
list-item:像块类型元素一样显示，并添加样式列表标记。
-
table:此元素会作为块级表格来显示。
-
inherit:规定应该从父元素继承 display 属性的值。
13、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
-
标签选择符 类选择符 id选择符
-
继承不如指定 Id>class>标签选择
-
后者优先级高
14、什么是静态网页？什么叫做动态网页？
-
(1)静态网页：没有数据交互的网页，没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有html+css+JavaScript做成的网站。
-
(2)动态网页：有后台数据参与的网页，网页中的数据是从数据库取的，需要有后台逻辑的支持。比如动态网页就是jsp页面（后台语言是java）、asp页面（后台语言是asp.net）。
15、前端语言有哪些？后端语言有哪些？
-
(1)前端语言：HTML、css、javascript。
-
(2)后端语言（服务器端语言）：php、java、asp.net。最近新出的node.js
16、前端性能优化有哪些方法?
①对于页面来说：
- 尽量减少DOM元素的数量
- 减少iframe的数量
- 减少http的请求次数
- 提前加载
②对于CSS来说：
-
将样式表置顶
-
使用link代替@important
-
区别1：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
-
区别2：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。link支持定义RSS(简易信息聚合).
-
区别3：link支持使用Javascript控制DOM去改变样式；而@import不支持。
③对于JS来说：
-
将脚本置底
-
使用外部JS和CSS文件
-
精简JS和CSS文件，去除重复脚本
