CSS选择器优先级
important > 内联> id选择器> class选择器 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符
水平垂直居中
1.绝对定位，位置上左50%然后margin为负div高宽的一半。
如一个200X200的div居中
.div {
position：absolute；
left：50%；
top：50%；
margin-left：-100px；
margin-top:-100px;
}
2.相对布局＋transform
.div {
position：relative；
top：50%；
left：50%；
transform：translate（-50%，-50%）；
}
3.flex布局
.div {
display:flex;
justify-content:center;
align-items:center;
}
清除浮动
1.为父级元素设置height
2.父级元素设置overflow：hidden
3.加入样式为clear：both的空div
4.父级定义伪类
.div:after{
display:block;
content:".";
clear:both;
height:0;
visibility:hidden;
}
H5常用新增元素
1.<header>定义页眉，通常用于导航，但也可以用在内容中
2.<footer>定义页脚
3.<audio>定义音频
4.<video>定义视频
5.<canvas>用于绘图
6.<section>定义主体部分
6.<article>定义一个来自外部的完整的块，比如文章、博客
7.<progress>进度条
8.<time>时间
H5语义化标签
语义化是根据内容的结构，选择合适的标签。
优点：1.有利于爬虫抓取有效信息，爬虫是根据标签来确定上下文关键字权重的
2.语义化的HTML即使在没有CSS的情况下也有较好的内容结构和代码结构
3.方便团队开发和维护
4.方便机器解析
盒子模型
主要属性为：height、width、border、padding、margin
标准盒子模型的宽高是指内容区域的width和height
IE盒子模型的宽高是指内容区域的width和height+border+padding
box-sizing属性
box-sizing取不同的值会决定box计算宽高的方式，共有三个属性：
1.content-box，border和padding不计算入width之内
2.padding-box，padding计算入宽高
3.border-box：padding和border都算入宽高
CSS3动画
动画属性：
1.@keyframes：规定动画
2.animation：所有动画属性的简写，除了animation-play-state
3.animation-name：规定动画名称
4.animation-duration：规定周期，默认为0
5.animation-timing-function：规定动画的速度曲线，默认为ease
6.animation-delay：规定开始的时间，默认0
7.animation-iteration-count：规定播放次数
8.animation-direction：规定下一周期是否逆向播放，默认normal
9.animation-play-state：规定动画运行或暂停，默认running
10.animation-fill-mode：规定播放时间外动画的状态