#### 1. CSS盒模型，在不同浏览器的差异
1. 分为标准盒模型( w3c )和 IE盒模型
2. 标准盒模型：width = width -- box-sizing: content-box ( 默认值 )
完整的盒子占位计算：width(内容) + padding(填充) + border(边框) + margin(边界)
3. IE盒模型：width = width + padding + border -- box-sizing: border-box
完整的盒子占位计算：width(内容) + margin(边界)
#### 2. CSS所有选择器及其优先级、使用场景，哪些可以继承，如何运用at规则
1. !important --> 内联样式 --> ID选择器 --> 类选择器 --> 标签选择器和伪元素选择器 --> * > + ~ 符号选择器
2. 10000 --> 1000 --> 100 --> 10 --> 1 --> 0
#### 3. CSS伪类和伪元素有哪些，它们的区别和实际应用
1. 伪类包含两种：状态伪类和结构性伪类
1. 状态伪类：active focus hover link visited
2. 结构性伪类也就是新的CSS3选择器：first-child last-child nth-child nth-last-child...
2. 伪元素是对元素中的特定内容进行操作，或者操作源文档元素不存在的内容，比如在DOM前后添加虚拟元素
1. 常见的伪元素：:before :after :first-letter :first-line
2. CSS3推荐使用::双冒号区分伪类，IE9支持，如果需要兼容IE8及以下则使用:单冒号
#### 4. HTML文档流的排版规则，CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式 ，雪碧图的实现原理
#### 5. 浮动
1. 浮动的核心：浮动元素会脱离文档流向左/向右浮动，直到碰到父元素或者另一个浮动元素
2. 浮动元素可以设置宽高，因为浏览器将display属性设置成为block了
3. 浮动元素的父盒子高度会塌陷，因为子元素浮动脱离了文档流
4. 浮动最先的设计是用来实现文字环绕功能的
5. 可以通过触发BFC来进行清除浮动：父元素添加 overflow: hidden
6. 清除浮动的最佳实践：clear属性添加要需要清除浮动的元素上，不需要zoom: 1，那是IE6/7的兼容方案
```
.clearfix::before, .clearfix::after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
```
#### 5. 水平垂直居中的方案、可以实现6种以上并对比它们的优缺点
1. 移动端使用 flex 方案
2. PC端分为居中元素固定宽高与不固定宽高
3. 居中元素固定宽高：绝对定位 + 负margin、绝对定位 + margin、绝对定位 + CSS3计算函数
4. 居中元素不固定宽高：绝对定位 + transform、display: table-cell、flex
```
--> 方法一：绝对定位 + 负margin
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
--> 方法二：绝对定位 + margin
.wp {
position: relative;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
--> 方法三：绝对定位 + CSS3计算函数
.wp {
position: relative;
}
.box {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
--> 方法四：绝对定位 + transform
.wp {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
--> 方法五：table布局，table单元格中的内容天然是垂直居中，设置水平居中即可
.wp {
text-align: center;
}
.box {
display: inline-block;
height: 50px;
}
--> 方法六：display: table-cell，模拟table布局，不需要table那么多代码
.wp {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box {
display: inline-block;
}
--> 方法七：flex
.wp {
display: flex;
justify-content: center;
align-items: center;
}
```
#### 6. BFC实现原理，可以解决的问题，如何创建BFC
1. 简单来说：BFC就是创建一个不受外界干扰也不干扰外界的盒子
2. 解决问题：清除浮动
3. 一般常用的是：overflow:hidden，其它非常多的样式属性也能触发
#### 7. 可使用CSS函数复用代码，实现特殊效果
#### 8. PostCSS Sass Less的异同，以及使用配置，至少掌握一种
#### 9. CSS模块化方案、如何配置按需加载、如何防止CSS阻塞渲染
#### 10. 熟练使用CSS实现常见动画，如渐变、移动、旋转、缩放等等
#### 11. CSS浏览器兼容性写法，了解不同API在不同浏览器下的兼容性情况
#### 12. 浏览器是怎样解析CSS选择器的
1. 样式规则从关键选择器开始从左向右进行匹配，会一直查找规则匹配的父元素，直到匹配成功或匹配失败
#### 12. 掌握一套完整的响应式布局方案
#### 13. margin合并
1. 在正常流当中，上下两个元素的margin会进行合并，取元素的最大margin
2. 浮动后元素的margin正常显示
#### 13. CSS技术书籍
