CSS是什么？
一个用来加样式的东西，他的厉害之处在于层叠样式表：
- 样式层叠：可以多次对同一选择器进行样式声明
- 选择器层叠：可以用不同选择器对同一个元素进行样式层叠
- 文件层叠：可以用多个文件进行层叠
- CSS 2.1是目前使用最广泛的CSS版本
- CSS3 开始分模块细化
怎么知道浏览器支持哪些特性？
- 将各种浏览器都跑一遍
- 使用canisue.com查看哪些浏览器支持
文档流
将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.
display：inline
- 元素从左到右排列，到达最右边才换行
- 宽度为内部inline元素的和，不能用width指定
- 高度由line-height间接决定，跟height无关
display：block
- 元素从上到下，每一个都另起一行
- block默认自动计算宽度，可用width指定（永远不要写宽度100%）
- 高度由内部文档流元素决定，可以设定height
display：inline-block
- 元素从左到右
- 宽度可以设置width
- 高度可以设置height
overflow溢出
- overflow:auto是灵活设置，根据内容判断是否显示滚动条
- overflow:scroll是永远显示滚动条
- overflow:hidden是直接隐藏溢出部分
- overflow:visible是直接显示溢出部分
- overflow可以分为overflow-x和overflow-y
盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距，和实际内容。
一共有两种盒模型
- content-box width=内容宽度（宽度只包含盒子内的部分）
- border-box width=内容宽度+padding+border（宽度包含盒子内的内容，内边距和边框）
浏览器渲染原理
浏览器渲染过程
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree）
- layout布局（文档流、盒模型、计算大小和位置）
- paint（把边框颜色、文字颜色、阴影等画出来）
- compose合成（根据层叠样关系展示画面）
如何更新样式
一般用js来更新样式
div.style.background='red';
div.style.dispaly='none';
div.classListAdd('red');
div.remove()直接删掉节点；
复制代码三种更新方式：
- js/css -> 样式 -> 布局 -> 绘制 -> 合成 比如：div.remove()
- js/css -> 样式 -> 绘制 -> 合成 比如：改变背景颜色
- js/css -> 样式 -> 合成 比如：改变transform
CSS动画的两种做法（transition 和 animation）
transform常用四个功能
- 位移translate
- 缩放scale
- 旋转rotate
- 倾斜skew
- 一般需要配合transition过渡
transition过渡
语法
- transition：属性名 时长 过渡方式 延迟
transition：left 200ms linear 1s
- 也可以用逗号隔开两种不同属性
transition：left 200ms，top 200ms
- display：none->block 不能过渡。一般改成visibili：hidden -> visible
- background颜色和opacity透明度可以过渡
- 过渡方式有：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier|step-start|step-end|steps
animation
制作动画分两步走：1.先定义动画 2.调用动画
定义动画
@keyframes heart{
0%{
transform: scale(1);
}
100%{
transform: scale(1.3);
}
}
复制代码调用动画
缩写形式：animation：时长| 过渡方式| 延迟 |次数 |方向 | 填充模式 | 是否暂停 | 动画名 * 时长：1s或者1000ms
- 过渡方式：跟transition取值一样
- 次数：3或者2.4或者infinite(循环)
- 方向：reverse/alternate/alternate-reverse
- 填充方式：none/forwards/backwards/both
- 是否暂停：paused/running
