一、css sprite概念以及优缺点

概念：将多个小图片拼接到一个图片中。通过background-position 和元素尺寸调节需要显示的背景图案
优点：
- 减少http请求次数，极大的提高页面加载速度
- 增加图片信息重复度，提高压缩比，减少图片大小
- 更换风格方便，只需要一张或几张图片上修改颜色或样式即可
缺点：
- 图片合并麻烦
- 维护麻烦，修改一个图片可能需要重新布局整个图片、样式

二、`display：none` 与 `visibility：hidden`的区别

联系：它们都能让元素不可见
区别：
- display：none 会让元素完全从渲染树中消失，渲染的时候不占据任何空间，visibility：hidden 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见
- display：none 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility：hidden 是继承属性，子孙节点消失由于继承了hidden，通过设置visibility：visible可以让子孙节点显示
- 修改常规流中元素的display通常会造成文档重排，修改visibility属性只会造成本元素的重绘
- 读屏器不会读取display：none；元素内容，会读取visibility：visible内容

三、`link`与`@import`的区别

link是HTML方法，@import是css方式
link最大限度支持并行下载，@improt过多嵌套导致串行下载，出现FOUC（文档样式短暂消失）
- FOUC?如何避免
- Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。
- 解决方法：把样式表放到文档的<head>
link可以通过rel=alternate stylesheet指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import

四、 display、float、position的关系

如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
否则，如果float不是none，框是浮动的，display根据下表进行调整
否则，如果元素是根元素，display根据下表进行调整
其他情况下display的值为指定值
总结起来：绝对定位、浮动、根元素都需要调整display

五、清除浮动的几种方式，各自的优缺点

父级div定义height
结尾处加空div标签clear:both
父级div定义伪类:after和zoom
父级div定义overflow:hidden
父级div也浮动，需要定义宽度
结尾处加br标签clear:both
比较好的是第3种方式，好多网站都这么用

六、 css3的新特性

新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}
个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
颜色透明度 color: rgba(255, 0, 0, 0.75);
圆角 border-radius: 5px;
渐变 background:linear-gradient(red, green, blue);
阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url(bt_blue.png) 0 10;
转换
- 旋转 transform: rotate(20deg);
- 倾斜 transform: skew(150deg, -10deg);
- 位移 transform: translate(20px, 20px);
- 缩放 transform: scale(.5);
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

CSS3新增伪类？

p:first-of-type 选择属于其父元素的首个元素的每个 元素。
p:last-of-type 选择属于其父元素的最后  元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个  元素。
p:only-child 选择属于其父元素的唯一子元素的每个  元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个  元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启用的表单元素。
:disabled 已禁用的表单元素。
:checked 单选框或复选框被选中。

display值？他们的作用

block 转换成块状元素。
inline 转换成行内元素。
none 设置元素不可见。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

七、 css的盒子模型与低版本的IE盒子比较

有两种， IE盒子模型、W3C盒子模型；

盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；

区别： IE的content部分把 border 和 padding计算了进去;

盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin)
IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
标准(W3C)盒模型：元素宽度 = width + padding + border + margin
怪异(IE)盒模型：元素宽度 = width + margin
标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高

box-sizing 常用的属性有哪些？分别有什么作用

box-sizing: content-box; 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; 继承父元素 box-sizing 属性的值

CSS优先级算法计算

优先级就近原则，同权重情况下样式定义最近者为准
载入样式以最后载入的定位为准
优先级为: !important > id > class > tag; !important 比内联优先级高

八、重绘和回流（重排）概念以及避免

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
回流必将引起重绘，而重绘不一定会引起回流

如何最小化重绘(repaint)和回流(reflow) ：

需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

九、CSS选择符、属性可以继承

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）

CSS哪些属性可以继承？哪些属性不可以继承

可继承的样式： font-size font-family color, UL LI DL DD DT
不可继承的样式：border padding margin width height

CSS3新增伪类有那些

:root 选择文档的根元素，等同于 html 元素
:empty 选择没有子元素的元素
:target 选取当前活动的目标元素
:not(selector) 选择除 selector 元素意外的元素
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素
:checked 选择被选中的表单元素
:after 在元素内部最前添加内容
:before 在元素内部最后添加内容
:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
:nth-child(odd)
:nth-child(even)
:nth-child(3n+1)
:first-child
:last-child
:only-child
:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
:nth-of-type(odd)
:nth-of-type(even)
:nth-of-type(3n+1)
:first-of-type
:last-of-type
:only-of-type
::selection 选择被用户选取的元素部分
:first-line 选择元素中的第一行
:first-letter 选择元素中的第一个字符

十、 CSS优化、提高性能的方法

多个css合并，尽量减少HTTP请求
将css文件放在页面最上面
移除空的css规则
避免使用CSS表达式
选择器优化嵌套，尽量避免层级过深
充分利用css继承属性，减少代码量
抽象提取公共样式，减少代码量
属性值为0时，不加单位
属性值为小于1的小数时，省略小数点前面的0
css雪碧图

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

方案1：
- .sub { height: calc(100%-100px); }
方案2：
- .container { position:relative; }
- .sub { position: absolute; top: 100px; bottom: 0; }
方案3：
- .container { display:flex; flex-direction:column; }
- .sub { flex:1; }
box-sizing 常用的属性有哪些？分别有什么作用
box-sizing: content-box; 默认的标准(W3C)盒模型元素效果
box-sizing: border-box; 触发怪异(IE)盒模型元素的效果
box-sizing: inherit; 继承父元素 box-sizing 属性的值

css基础篇

一、css sprite概念以及优缺点

二 、display：none 与 visibility：hidden的区别

三、link与@import的区别

FOUC?如何避免

四、 display、float、position的关系

五、 清除浮动的几种方式，各自的优缺点

六、 css3的新特性

display值？他们的作用

七、 css的盒子模型与低版本的IE盒子比较

CSS优先级算法计算

八、重绘和回流（重排）概念以及避免

九、CSS选择符、属性可以继承

CSS3新增伪类有那些

十、 CSS优化、提高性能的方法

一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度

二、`display：none` 与 `visibility：hidden`的区别

三、`link`与`@import`的区别

五、清除浮动的几种方式，各自的优缺点