一、CSS 选择器有哪些？
- 通用选择器：选择所有元素，不参与计算优先级**，兼容性 IE6+
-
X id 选择器**：选择 id 值为 X 的元素，兼容性：IE6+
- .X 类选择器**： 选择 class 包含 X 的元素，兼容性：IE6+
- X Y 后代选择器**： 选择满足 X 选择器的后代节点中满足 Y 选择器的元素，兼容性：IE6+
- X 元素选择器**： 选择标所有签为 X 的元素，兼容性：IE6+
- :link，:visited，:focus，:hover，:active 链接状态**： 选择特定状态的链接元素，顺序 LoVe HAte，兼容性: IE4+
- X + Y 直接兄弟选择器：在X 之后第一个兄弟节点**中选择满足 Y 选择器的元素，兼容性： IE7+
- X > Y 子选择器**： 选择 X 的子元素中满足 Y 选择器的元素，兼容性： IE7+
- X ~ Y 兄弟： 选择X 之后所有兄弟节点**中满足 Y 选择器的元素，兼容性： IE7+
- [attr]**：选择所有设置了 attr 属性的元素，兼容性 IE7+
- [attr=value]**：选择属性值刚好为 value 的元素
- [attr~=value]**：选择属性值为空白符分隔，其中一个的值刚好是 value 的元素
- [attr|=value]**：选择属性值刚好为 value 或者 value-开头的元素
- [attr^=value]**：选择属性值以 value 开头的元素
- [attr$=value]**：选择属性值以 value 结尾的元素
- [attr=value]*：选择属性值中包含 value 的元素
- [:checked]**：选择单选框，复选框，下拉框中选中状态下的元素，兼容性：IE9+
- X:after, X::after**：after 伪元素，选择元素虚拟子元素（元素的最后一个子元素）CSS3 中::表示伪元素。兼容性:after 为 IE8+，::after 为 IE9+
- hover**：鼠标移入状态的元素，兼容性 a 标签 IE4+， 所有元素 IE7+
- not(selector)：选择不符合 selector 的元素。不参与计算优先级**，兼容性：IE9+
- first-letter**：伪元素，选择块元素第一行的第一个字母，兼容性 IE5.5+
- :first-line**：伪元素，选择块元素的第一行，兼容性 IE5.5+
- nth-child(an + b)**：伪类，选择前面有 an + b - 1 个兄弟节点的元素，其中 n >= 0， 兼容性 IE9+
- nth-last-child(an + b)**：伪类，选择后面有 an + b - 1 个兄弟节点的元素 其中 n >= 0，兼容性 IE9+
- X:nth-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择前面有 an + b - 1 个相同标签**兄弟节点的元素。兼容性 IE9+
- X:nth-last-of-type(an+b)：伪类，X 为选择器，解析得到元素标签，选择后面有 an+b-1 个相同标签**兄弟节点的元素。兼容性 IE9+
- X:first-child**：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的第一个子元素。兼容性 IE7+
- X:last-child**：伪类，选择满足 X 选择器的元素，且这个元素是其父节点的最后一个子元素。兼容性 IE9+
- X:only-child**：伪类，选择满足 X 选择器的元素，且这个元素是其父元素的唯一子元素。兼容性 IE9+
- X:only-of-type：伪类，选择 X 选择的元素，解析得到元素标签**，如果该元素没有相同类型的兄弟节点时选中它。兼容性 IE9+
- X:first-of-type：伪类，选择 X 选择的元素，解析得到元素标签**，如果该元素 是此此类型元素的第一个兄弟。选中它。兼容性 IE9+
二、css sprite 是什么,有什么优缺点？
优点：
1.减少 HTTP 请求数，极大地提高页面加载速度
2.增加图片信息重复度，提高压缩比，减少图片大小
3.更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
1.图片合并麻烦
2.维护麻烦，修改一个图片可能需要重新布局整个图片，样式
三、display: none;与visibility: hidden;的区别？
联系：它们都能让元素不可见
区别：
- display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见。
- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点由于继承了 hidden 而消失，通过设置 visibility: visible，可以让子孙节点显示。
- 修改常规流中元素的 display 通常会造成文档重排。修改 visibility 属性只会造成本元素的重绘。
- 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden;元素内容。
四、link与@import的区别？
-
link是 HTML 方式，@import是 CSS 方式 -
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC -
link可以通过rel="alternate stylesheet"指定候选样式 - 浏览器对
link支持早于@import，可以使用@import对老浏览器隐藏样式 -
@import必须在样式规则之前，可以在 css 文件中引用其他文件 - 总体来说：link 优于@import
五、display: block;和display: inline;的区别？
block元素特点：
1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align
inline元素特点
1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.width/height属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 6.浮动或绝对定位时会转换为block 7.vertical-align属性生效
六、PNG,GIF,JPG 的区别及如何选？
GIF:
- 8 位像素，256 色
- 无损压缩
- 支持简单动画
- 支持 boolean 透明
- 适合简单动画
JPEG：
- 颜色限于 256
- 有损压缩
- 可控制压缩质量
- 不支持透明
- 适合照片
PNG：
- 有 PNG8 和 truecolor PNG
- PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
- 适合图标、背景、按钮
八、容器包含若干浮动元素时如何清理(包含)浮动？
1.容器元素闭合标签前添加额外元素并设置clear: both
2.父元素触发块级格式化上下文(见块级可视化上下文部分)
3.设置容器元素伪元素进行清理
九、什么是 FOUC?如何避免
Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head
十、外边距折叠
毗邻的两个或多个margin会合并成一个 margin，叫做外边距折叠。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
- 浮动元素/inline-block 元素/绝对定位元素的 margin 不会和垂直方向上的其他元素的 margin 折叠
- 创建了块级格式化上下文的元素，不会和它的子元素发生 margin 折叠
- 元素自身的 margin-bottom 和 margin-top 相邻时也会折叠
十一、如何水平居中一个元素？
- 如果需要居中的元素为常规流中 inline 元素，为父元素设置text-align: center;即可实现
- 如果需要居中的元素为常规流中 block 元素，1）为元素设置宽度，2）设置左右 margin 为 auto。3）IE6 下需在父元素上设置text-align: center;,再给子元素恢复需要的值
- 如果需要居中的元素为浮动元素，1）为元素设置宽度，2）position: relative;，3）浮动方向偏移量（left 或者 right）设置为 50%，4）浮动方向上的 margin 设置为元素宽度一半乘以-1
- 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）偏移量设置为 50%，3）偏移方向外边距设置为元素宽度一半乘以-1
- 如果需要居中的元素为绝对定位元素，1）为元素设置宽度，2）设置左右偏移量都为 0,3）设置左右外边距都为 auto
十二、如何竖直居中一个元素
需要居中元素为单行文本，为包含文本的元素设置大于font-size的line-height：
