一、浏览器渲染原理：
1.根据HTML构建html树（DOM节点）
2.根据css构建css树（cssom）
3.将DOM和CSSOM合并成渲染树（render tree）
4.layout布局（文档流、盒模型、计算大小和位置）
5.Paint绘制（边框、文字颜色，阴影等画出来）
6.Compose合成（根据层叠关系展示画面）
ps:查询资料增加（
reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。注意：(1)display:none 的节点不会被加入Render Tree，而visibility: hidden 则会，所以，如果某个节点最开始是不显示的，设为display:none是更优的。 (2)display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。 (3)有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。但是在有些情况下，比如resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。）
二、css动画
transition:
transform:transition(50%,50%) 里面可以跟px 百分比
transition 位移
scale 缩放
rotate 旋转（deg度）
skew 倾斜
animation
animation:XXX 1s linear infinite alternate-reverse;(多属性 查看mdn文档)
第一种写法
@keyframs XXX{
from{ transform: scale(1.0); }
to{ transform:scale(1.5) }
}
第二种百分数写法
@keyframs XXX{
0%{top:0;left:0;}
30%{top:50px}
66%,72%{left:50px}
100%{top:100px;left:100%}
}
其它css不太熟悉的一些样式
a{color:inherit;} 继承上一个的属性 继承颜色 border:inherit 继承边框
table必加
table{
border-collapse:collapse; 表示边框合并在一起
border-spacing:0 边框之间的距离为0px
}
vertical-align:middle; img图片下面有空的用这个
white-space:nowrap; 文字内容不允许换行
css定位
position:relative 相对
position:absolute 绝对
position:fixed 固定
position:grid 粘性定位
position:static 默认
网友评论