伪类选择器
:link：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover：鼠标指针浮动在元素上面
伪元素选择器
有两个冒号的选择器（::）
::before：选择器在被选元素的内容前面插入内容
::after：选择器在被选元素的后面插入内容
关系选择器（空格>~+）4个
1后代选择器 空格连接 div p{}
2相邻后代选择器 > 连接 div>p{}
3兄弟选择器 ~连接 div~p{}
4相邻兄弟选择器 +连接 div+p{}
盒子模型
一个盒子由4部分组成：content、padding、border、margin
IE盒子模型width包含padding和border 对应css3 box-sizing:border-box
标准盒子模型不包含 对应css3 box-sizing:content-box
超出省略号
单行省略号：
div{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
多行省略号：
div{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
text-overflow: ellipsis;
}
BFC块级格式化上下文 应用场景：防止margin重叠
chrome支持小于12px的文字
1、transform：scale()
2、-webkit-text-size-adjust:none;
回流和重绘
回流（又名重排）：元素[位置、大小]发生变化导致其他节点联动，需要重新计算布局
重绘：修改了一些不影响布局的属性比如：颜色
css优先级
权重记忆口诀：
行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器或者伪元素+1
总结：
样式指向同一元素，权重规则生效，权重大的被应用
样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
样式不指向同一元素时，权重规则生效，就近原则生效，离目标元素最近的样式被应用
css3新特性
过渡
transition: css属性 花费时间 效果曲线 延迟时间
分开写
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay:2s;
动画
animation: 动画名称 一个周期花费时间 效果曲线 动画延迟 播放次数（默认1） 是否反向播放动画 是否暂停动画
animation: animate-name 2s linear alternate infinite;
animation-fill-mode: none | forwards | backwards | both
forward: 当动画完成后，保持最后一个属性值
.logo{
animation: logo1 1s ease-in 2s;
animation-fill-mode: backwards;
}
@keyframes logo1 {
0% {
transform: rotate(180deg);
opacity: 0;
}
100% {
transform: rotate(0deg);
opacity: 1;
}
}
