css样式很多，有很多属性在不同浏览器下展示效果不同，需在实践操作中不断总结，多做笔记。用好css需要多用想象，不要用理性思维。
什么是css？
css是指样式层叠表，其中层叠指的是样式，选择器及文件层叠，这些使得css极度灵活。 css2.1版本是目前使用最广泛的版本，css3是最现代的版本。
浏览器兼容特性
在实际开发中，所做的网页要在很多浏览器展示，而css中有很多特性在部分浏览器显示会错乱，因此需调试浏览器兼容性，有种快速简便的方法，可在caniuse.com网站输入样式，即可查看大部分浏览器的支持情况。
如何调试代码？
用万能的border调试法，觉得哪个元素有问题，就加上border，看边界是否符合预期。
css文档流
- 文档流的英文名称叫做 Normal Flow，应该翻译成常规流或者普通流；
- 文档流中，内联元素从左到右排列，遇到行尾折行；
- 文档流中，块级元素从上到下排列，一行只有一个块级元素。
HTML 5 中已经抛弃了「内联元素」的概念，所有元素都可以通过 CSS 变成内联的
内联元素不接受 width 和 height 设置宽高
内联元素的宽度由其内部的元素宽度总和决定
内联元素一般不能包含块级元素
内联元素的高度由 line-height 间接确定
布局是什么？
布局是把页面分成一块一块，按左中右，上下等排列。
-
布局分类：固定宽度、不固定宽度、响应式
-
布局的两种思路：从大到小，从小到大（建议新人）
float布局 应用：可以兼容低版本IE； 要点：子元素加float:left和width，父元素一定要加.clearfix; flex布局 应用：兼容最新浏览器，满足所有需求；一维布局 要点：主要分container和items，常用的是以下样式： 1. display:flex; 2. flex-direction:row/column; 3. flex-wrap:wrap; 4. justify-content:center/space-between; 5. align-items:center; grid布局 应用：二维布局，尤其适合不规则布局，功能很强大，但目前还没普及； 要点：也分container和items，样式很多可在css tricks查阅；
浏览器渲染原理
浏览器渲染过程主要是下面六部：
- 根据HTML构建HTML树（DOM）
- 根据css构建css树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree）
- layout布局（文档流、盒模型、计算大小和位置）
- paint绘制（边跨颜色，文字颜色、阴影等画出来）
- composite合成（根据层叠关系展示画面）
css动画两种做法
- transform
- 四个常用功能
1. 位移 translate 可做绝对定位居中
2. 缩放 scale 容易出现模糊
3. 旋转 rotate 一般用于制作loading
4. 倾斜 skew 用的少
一般要配合transition过度动画 以上属性可以组合使用
- transition过度
- 作用是补充中间帧，
- 不是所有属性都可以过渡，比如display:none;到block不能过渡，要改成visibility:hidden;=>visible;
- 过渡必须要有起始，如果有中间点，使用两次transform或者animation
3.animation
- 使用@keyframes完整语法，一种写法是from to，另一种写法是百分数：
- 属性值 animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名； 具体取值和示例搜索关键词加MDN
总结：css很强大也很复杂，需要在实践中不断体会不断总结。
