1、CSS3 新特性有哪些？
答、1. 颜色：新增 RGBA，HSLA 模式
2. 文字阴影（text-shadow）
3. 边框： 圆角（border-radius） 边框阴影： box-shadow
4. 盒子模型：box-sizing
5. 背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
- 渐变：linear-gradient、radial-gradient
- 过渡：transition，可实现动画
- 自定义动画
- 在 CSS3 中唯一引入的伪元素是 ：selection.
- 媒体查询，多栏布局
- border-image
12.2D 转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y) - 3D 转换
2、描述一下 CSS 中的渐进增强，优雅降级之间的区别？
答、优雅降级和渐进增强印象中是随着 css3 流出来的一个概念。由于低级浏览器不支持css3，但 css3 的效果又太优秀不忍放弃，所以在高级浏览中使用 css3 而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。
举个例子：
a{
display：block； width：200px； height： 100px；
background：aquamarine；
/我就是要用这个新 css 属性/ transition：all 1s ease 0s；
/可是发现了一些低版本浏览器不支持怎么吧/
/往下兼容/
-webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；
-o-transition： all 1s ease 0s；
/那么通常这样考虑的和这样的侧重点出发的 css 就是优雅降级/
}
a：hover{ height：200px；
}
/ 那如果我们的产品要求我们要重低版本的浏览器兼容开始/ a{
/优先考虑低版本的/
-webkit-transition：all 1s ease 0s；
-moz-transition：all 1s ease 0s；
-o-transition： all 1s ease 0s；
/高版本的就肯定是渐进渐强/ transition：all 1s ease 0s；
}
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。“渐进增强”观点则认为应关注于内容本身。
3、对 BFC 规范的理解有哪些？
答、 1）定义：
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。
布局规则：A. 内部的 Box 会在垂直方向，一个接一个地放置。
B. Box 垂直方向的距离由 margin 决定。属于同一个BFC 的两个相邻Box 的 margin 会发生重叠。
C. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
D. BFC 的区域不会与 float box 重叠。
E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
F. 计算 BFC 的高度时，浮动元素也参与计算。
3） 哪些元素会生成BFC：
A. 根元素
B. float 属性不为 none
C. position 为 absolute 或 fixed
D. display 为 inline-block， table-cell， table-caption， flex， inline-flex
F. overflow 不为 visible
4、什么是 CSS reset 是什么？normalize.css 是什么？
Reset 重置浏览器的 css 默认属性 ，浏览器的品种不同，样式不同，然后重置，让他们统一。（暴力的，强制的）
5、你遇到过的兼容问题有哪些？如何解决的？
1、png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成PNG8.
2、浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的{margin：
0;padding：0;}来统一。
3、 IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示margin 比设置的大。浮动 ie 产生的双倍距离 #itcast{ float：left; width：10px; margin：0 0 0 100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 display：inline;将其转化为行内属性。( “” 这个符号只有 ie6 会识别)
4、 IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性。解决方法：统一通过 getAttribute()获取自定义属性。
5、 IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;
Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性。
解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
6、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust：none; 解决。
7、超链接访问过后hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和active 了。解决方法是：改变 CSS 属性的排列顺序：L-V-H-A 、 a：link {} a：visited {} a：hover {} a：active {}
6、清除浮动有几种方式?
答：1、父级 div 定义 height。
原理：父级 div 手动定义 height，就解决了父级 div 无法自动获取到高度的问题。 简单、代码少、容易掌握 ，但只适合高度固定的布局.
2、结尾处加空 div 标签 clear：both
原理：在浮动元素的后面添加一个空 div 兄弟元素，利用 css 提高的 clear：both 清除浮动，让父级 div 能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .
3、父级 div 定义 伪类：after 和 zoom
/*清除浮动代码*/
.clearfix：after{
content：""； display：block； visibility：hidden； height：0；
line-height：0； clear：both；
}
.clearfix{
zoom：1}
原理：IE8 以上和非IE 浏览器才支持：after，原理和方法 2 有点类似，zoom(IE 专有属性)可解决ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少 CSS 代码。
4、父级 div 定义 overflow：hidden
超出盒子部分会被隐藏，不推荐使用.
5. 双伪元素法：
.clearfix：before，.clearfix：after {
content： ""； display： block； clear：both；
}
.clearfix {
zoom： 1；}
7、要你出一套适应不同分辨率，不同终端的前端实现方案你有什么思路？
答、流式布局：
使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方
式，就是移动 web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
响应式开发：
那么 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端。越来越多的设计师也采用了这种设计。
CSS3 中的 Media Query（媒介查询），通过查询 screen 的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备） 768px 以下小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上
由于响应式开发显得繁琐些，一般使用第三方响应式框架来完成，比如 bootstrap 来完成一部分工作，当然也可以自己写响应式。
9、px em rem 取用选择依据？
答、 1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度DPI。
2） em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小， 因此并不是一个固定的值。
3） rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
4） 区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和rem 可以缩放， rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。
10、css 权重如何计算？
页面显示样式的优先级取决于其“特殊性”’，特殊性越高，就显示最高的，当特殊性相等时，显示后者
特殊性表述为 4 个部分：0,0,0,0
一个选择器的特殊性如下:
• 对于选择器是#id 的属性值,特殊性值为：0,1,0,0
• 对于属性选择器，class 或伪类，特殊性值为：0,0,1,0
• 对于标签选择器或伪元素，特殊性值为：0,0,0,1
• 通配符‘*’特殊性值为：0,0,0,0
• 内联样式特殊性值为：1,0,0,0
12、css sprites，如何使用？
答、Css 精灵图，把一堆小的图片整合到一张大的图片（png）上，减轻服务器对图片的请求数量。再利用 css 的“background-image”、“background-repeat”、“background-position”的组合进行背景定位
13、src 与 href 的区别
src（source）指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档中，如 js 脚本，img 图片和 iframe 等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执
行完毕，类似于将所指向资源嵌入当前标签内。
href（hypertext reference/超文本引用）指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。