box-sizing
设置盒模型的属性
content-box：标准盒模型，宽高仅包括 content
border-box：IE 盒模型，宽高包括 content+padding+border
display
block 块级
inline 行内
inline-block 行内块
table 块级表格，不建议使用
list-item 列表块级，未使用过
flex 弹性盒，非常强大
none 从文档流消失
inherit 继承
inline-block 元素间会有空白
inline-block的元素间有空格、换行，制表符时，浏览器会渲染出一个空格。解决：
1.元素写在一行，但是不美观；
2.将元素的父元素 font-size 设为 0，再复原子元素的样式，但是 Safari 浏览器不行，且麻烦；
3.设置负的 margin 值，但边缘元素有影响；
4.letter-spacing 或 letter-spacing 负值，较为完美
flex 布局
flex 布局是比浮动实现布局更好一些的方案，可以查看阮一峰老师的文章，讲解得很好，这里就试着简单描述下：
弹性盒，需要理解轴和容器：
首先，轴为主轴和交叉轴，通过 flex-direction 修改。
其次，容器也分父容器和子容器：
父容器
通过 justify-content 和 align-items 控制主轴和交叉轴的对齐方式；
通过 flex-wrap 控制换行
子容器
通过 flex 定义主轴上的伸缩
通过 align-self 设置交叉轴排列
position
static 默认值
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
inherit 继承
定位原点
relative 相对于自身在文本流中位置 content box 定位；
absolute 相对于第一个 position 值不为 static 的祖先元素的 padding box 定位；
fixed 相对于浏览器窗口
sticky 基于用户滚动位置
选择器
ID选择器
类选择器
伪类选择器
元素选择器
伪元素选择器
标签选择器
属性选择器
后代选择器
子代选择器
兄弟选择器
相邻兄弟选择器
通配符选择器
优先级计算
首先查看权重 !important，优先级最高，出现重复权重，继续匹配；
接着行内样式，特殊值 1000；
再接着 id 选择器，特殊值 0100；
然后类选择器，伪类选择器和属性选择器，特殊值 0010；
再然后元素选择器和伪类选择器，特殊值 0001；
最后通配符最低，规则相加不进位，按高者算，相等则后来居上
伪类选择器和伪元素选择器的区别
相同：二者都是格式化文档树之外的信息
区别：伪类是修饰已有元素处于某个状态的样式，伪元素创建元素，并添加样式
伪类通常使用单冒号，伪元素通常使用双冒号，但为了兼容老浏览器，也会使用单冒号表示为元素，如 :before
LVHA
a 标签的四种状态
link：链接访问前
visited：链接访问后
hover：鼠标滑过
active：激活
其中， link 可与 visited 交换位置
a 标签点击后hover事件失效
将 a 标签的 hover 和 actived 交换位置
新增伪类
e:nth-child(n)
e:first-child
e:nth-of-type(n）
e:empty
:not(e)
:enabled
:disabled
:checked
浏览器如何解析 css 选择器
从关键选择器开始，逐渐左移，查找选择器祖先元素，直到找完，或者不匹配
因此，避免层级过深，并设置好关键选择器
BFC
块级格式化上下文，这类元素的内部元素布局不会影响到外部元素，外部元素布局也不会影响内部元素。如同隔离区域。
形成条件：
根元素
浮动元素 float＝left|right或inherit（≠none）
绝对定位元素 position＝absolute或fixed
有块级特性的元素 display＝inline-block|flex|inline-flex|table-cell或table-caption
溢出处理的元素 overflow＝hidden|auto或scroll(≠visible)
浮动
产生原因是希望页面中的图片悬浮，文字围绕，后用于布局；
设置：float: left|right
特点是：
浮动元素左右移动，直到遇见另一个浮动元素或其外边缘的包含框
浮动元素脱离文档流
会产生高度塌陷，影响后面页面的布局
清除浮动
使用 clear
原理
clear 官方解释为：元素盒子的边不能和前面的浮动元素相邻，所以 clear 是避免浮动元素对其他元素的影响，而不是消除浮动
方案
添加空元素：
设置 clear:both，不建议使用，添加了冗余元素
伪元素：
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block; // 伪元素为内联，需要设置为块级才能使 clear 生效
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
双伪元素：
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
zoom：1 与 hasLayout
zoom：1，是针对 IE 低版本浏览器，解决 ie 下元素浮动父元素不会自动扩大的问题。
将其设置为 1，触发 IE 特殊属性 hasLayout，当元素的 hasLayout 设置为 true 时，该元素自己负责自己和子孙元素的尺寸计算和定位，虽然需要花费代价，但能够解决 IE 浏览器的浮动问题。
设置 BFC
方案：设置父元素 overflow: hidden;
原理：形成 BFC 的元素，内部元素布局不会影响外部元素，也就避免了内部的浮动对外部的影响。
缺点：内容溢出会被剪裁
动画
transition：关注的是 css property 的变化
animation：作用于元素本身，采用关键帧
手写动画的最小事件间隔
显示默认频率 60Hz，所以最小间隔 1/60*1000ms=16.7ms
全屏滚动
类似于轮播，整体元素一直排列下去，展示整体一部分，overflow:hidden 溢出部分隐藏，响应鼠标事件，修改展示部分 tansition: all 1000ms ease
视觉滚动
多层背景以不同的速度移动，形成立体的运动效果
摘自 CavsZhouyou
