一、层叠样式表（ CCS）
发明人：李爵士的挪威同事---赖先生。
层叠的含义：样式层叠、选择器层叠、文件层叠。
使用最广泛的版本（IE支持）：CSS2.1（2004~2011）。
现代版本（分模块，IE8部分支持）：CSS3（1999年开始起草）。
CSS特性浏览器支持查询网站：Can I use... Support tables for HTML5, CSS3, etc
CSS学习方法：
1.CSS是一门艺术，学好需要想象力。
2.不要问【为什么会这样】，只管做，记住【原来是这样】。
3.只要效果好，代码烂一些无所谓。
4.COPY+RUN+MODIFY -----CRM （抄、运行、修改）
语法一：样式语法
选择器 {
属性名：属性值；
/*注释*/
}
语法二：@语法
@charset "UTF-8"
@import url(2.css);
@media (min-width:100px) and (max-width:200px){}
二、浏览器渲染原理
渲染流程：
1.根据HTML构建HTML树（DOM）；
2.根据CSS构建CSS树（CSSDOM）；
3.将两棵树合并成一颗渲染树（render tree）；
4.Layout布局（文档流、盒模型、计算大小和位置）；
5.Paint 绘制（将边框颜色、文字颜色、阴影等画出来）；
6.Compese合成（根据层叠关系展示画面）；
三种更新方式：
更新流程触发检测：CSS Triggers
三、CSS 动画的两种做法（transition 和 animation）
transition（过渡）
*作用：补充中间帧
*语法：
transition:属性名 时长 过渡方式 延迟
transition:left 200ms linear
可用逗号分隔两个不同属性: transition: left 200ms,top 400ms
可用all代表所有属性： transition: all 200ms
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps
*注意
#并非所有属性都能过渡，例如：
display:none => block 无法过渡
一般需改成visibility:hidden=>visible
background颜色可以过渡，opacity透明度也可以过渡
【display: none与visibility: hidden的区别】
display与元素的隐藏
如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。
visibility与元素的隐藏
给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。
很多前端的同学认为visibility: hidden和display: none的区别仅仅在于display: none隐藏后的元素不占据任何空间，而visibility: hidden隐藏后的元素空间依旧保留 ，实际上没那么简单，visibility是一个非常有故事性的属性
1、visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别；
2、visibility: hidden不会影响计数器的计数，如图所示，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样；
3、CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
*过渡必须要有起始，一般只有一次动画或者两次，比如hover和非hover状态的过渡。如果除了起始，还有中间，怎么办？
*两种方法：
1.使用两次transform
.a===transform===>.b
.b===transform===>.c
*如何知道中间点呢？用setTimeout或者监听transitionend事件。
animation的使用
*声明关键帧
@keyframes XXX {
form{
transform:translateX(0%);
}
to{
transform:translateX(100%)
}
}
@keyframes YYY{
0%{}
30%{}
68%,72%{}
100%{}
}
*添加动画 {animation xxx 1s;}
*让动画停在最后一帧，加上"forward"。