1浏览器的渲染原理
第一步首先根据html构建三棵树1 dom树 2cssom 3 rendertree
第二步前面两颗树合并为一颗渲染树
第三步根据渲染树来计算（文档流，盒模型，计算大小和位置）
第四步paint绘制（把边框颜色，文字颜色，阴影画出来）
第五步compose合成（根据层叠关系展示）
有三种不同的渲染方式
1js/css>样式>布局>绘制>合成
2js/css>样式>绘制>合成
3js/css>样式>合成
2css动画的两种做法
1transform
常用的四种属性：translate、scale、rotate、skew
一般都要配合transtion过渡，inline元素不支持transform，需要先变成block
2animation
首先添加animation：时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名；
时长：1s或者1000ms
过渡方式：跟transition取值一样，如linear
次数：3或者2.4或者iinfinite
方向：reverse|alternate|alternate-reverse
填充模式：none|forward|backwards|both
是否暂停：paused|running
声明关键帧，添加动画
声明@keyframe关键帧比如
@keyframe xxx{
0%{};
66%{};
}
3文档流、盒模型
文档流Normal Flow、块、内联、内联块
流动方向
flow中的文档流动方向：1从左到右2从上到下
从左到右lnline元素，到最右边才换行。从上到下block元素，每个都另起一行。
inline-block也是从右到左
新的标准不会区分块级元素和内联元素，只要加上了display+样式（inline或block）
inline-block也是从左到右，但是不会分割元素
宽度
span元素不接受宽度，span元素是由它内联元素的总和决定的
block的默认宽度是auto而不是100%，大部分情况永远不要写width：100%
inline-block结合前两者特点，可用width
高度
inline高度由line-height间接决定，和height无关，具体就是根据字体的类型不同，所占据的高度也不同
block高度由内部文档流元素决定，可以设height，加入position：absolute可以脱离文档流
inline-block和block类似，可以设height。
overflow
overflow超出文档流，属性：scroll，hidden，auto，如果有滚动条，内联元素按照原来的板式显示
脱离文档流
如何让元素脱离文档流
1.position：absolute/fixed
2float：left
css核心概念：盒模型
1.内容盒模型
中心content，内边距padding，边距border，外边距
2边距盒模型
包含border
margin合并
孩子和孩子之间会合并margin，第一个孩子和最后一个孩子会和父母合并，只有上下会重叠，左右不会重叠
取消合并的方式：1在父元素中加border2在父元素中加padding3在父元素中加overflow：hidden
基本单位
长度单位
px像素，em为 相对于自身的font-size的倍数
百分数，整数，rem，vm和vh，其他长度单位都用的很少。
颜色
十六进制#FF6600或者#F60
RGBA颜色rgb（0,0,0）或者rgba（0,0,0,1）
hsl颜色hsl（360,100%，100%）
snipaste pro颜色转换工具
border调试法
1.怀疑摸个元素有问题
2.就给这个元素加border
3.border没出现？说明选择器错了或者语法错了
4.border出现了？看看边界是否符合预期
5.bug解决了才可以把border删掉
网友评论