浏览器渲染原理
浏览器有专门的渲染引擎，完成渲染工作。
当一个第一次渲染的时候会经历
- 构建HTML树（DOM）
- 构建CSS树
- 合并render tree（渲染树）
- layout（布局页面）
- paint（绘制页面）
- compose（合成）
- 当我们用javascript调整结构时，不同的操作方式，因引发页面不同的调整方式，并不是将所有操作都是将渲染操作重新来过
CSS基础
- 最广泛的CSS版本是2.1，目前最新是CSS3，它是模块化升级。
block inline-block inline在最新的css中，已经可以使用display来更换任意元素的属性- 块级元素的
margin合并问题：
- 其子元素之间外边距会合并
- 首尾的子元素外边距会与父元素合并
- 只会上下合并、不会左右合并
- 可以使用
css布局
float: 较老的布局方式，优点是兼容型比较好，IE都可以使用
- 父元素：
.clearfix{
content: '';
display: block;
clear: both;
}
- 子元素：
float+width
flex: 目前最新的布局方式，布局方式更灵活，方便
- 父元素：
display: flex; - 子元素
flex-direaction: row/row-reverse/column/column-reverse;
flex-wrap: wrap/nowrap;
justify-content: start/end/center/space-around/space-between;
items-content: start/center/space-around/space-between;
flex: order shrink basis;
align-items: center/start/end;
align-self: auto/normal/center/start/end;
grid: 未来的布局方式，布局更加容易，目前兼容性不好
- 父元素：
display: grid; - 子元素
grid-column-start:
grid-column-end:
grid-row-start:
grid-row-end:
grid-area:
order:
grid-template-columns:
grid-template-rows:
层叠上下文
一个div元素的层级从下到上依次是：bankground > border > block(children) > float > inline-block(children content)
- 最初它们都在
html上层叠 - 定位元素在最上面
- 当使用了以下属性时，会产生新的层叠：
z-index: 0;flex:opacity:transform:
定位
position用于指定一个元素在文档中的定位方式
position: static; //默认值
position: revlative; //相对定位
position: absolute; //绝对定位（相对于又相对定位的父级元素）
position: fixed; //绝对定位（相对视口）
position: sticky; //黏性定位
css动画
transform可以实现旋转、缩放、倾斜或平移给定元素
transform: translate(); //位移
transform: scale(); //缩放
transform: rotate(); //旋转
transition可以实现一个元素在不同状态之间切换的时候定义不同的过渡效果;它是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性。
transition-property: //应用过渡属性的名称
transition-duration: //过渡所需时间
transition-timing-fucntion: //过渡变化方式
transition-delay: //过渡延迟时间
animation可以实现指定一组或多组动画；它是animation-name，animation-duration,animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode和animation-play-state属性的一个简写属性形式。
animation-name: //动画名称
animation-duration: //动画时长
animation-timing-function: //动画节奏
animation-delay: // 动画延迟开始的时间
animation-iteration-count: //循环次数
animation-direction: //是否反向播放
animation-fill-mode: //动画完成前后应使用什么样式
animation-play-state: //动画运行或暂停的状态
示例：
animation:name 3s ease-in 1s infinite reverse;
@keyframes name{
from{ transform: scale(1.0); }
to{ transform: scale(1.5); }
}
