块级元素:独占一行；可以设置padding，marigin；display；可以包含行内元素和行内快元素
行内元素：与其他元素在一水平面上，设置不了padding，margin；不可以包含块级元素
bfc：块级格式化上下文；独立的区域，内部元素按照他的规则渲染，不会和外部打交道
清楚内部浮动效果；垂直margin不会重叠，margin不会溢出，左边定宽，右边自适应
ifc，行内格式化上下文，行内元素垂直水平居中，段落
ffc，弹性布局：display：flex
gfc：网格布局：display：grid
重绘是颜色改变的时候
回流是页面渲染的时候，会一定引起重绘，页面第一次加载的时候，会一定发生回流
减少页面的重绘和回流，不去改变每个的样式，直接改变className
flex grow：瓜分剩余空间的的比重
flex basis 和width一样，权重比width大
flex shrink 空间不足时，定义子容器的压缩比例
元素垂直居中的方法：margin：0 auto；position：abulote;top:50%;left:50%;transform:translate(-50%,-50%);
display:flex;align-item:center
两列布局：两侧固定，中间自适应
流式布局：百分比布局
圣杯布局：固定header和footer，中间是个三栏布局，中间部分的高度是三栏中最高的区域
盒模型：content+padding+border+marigin
rem根据根元素，字体不适用于rem，通过媒体查询来实现
em根据父元素
vm/vh根据视图
css适配：
通过link标签的media属性指定不同的媒体类型<link media="screen and (max-qidth:500px)"></link>
使用媒体查询
transition过度效果 property：名称；duration：时间；timing-function：速度曲线；delay：什么时间开始
transformm：rotate：旋转；translate：平移；sacle：缩放；skew倾斜
perspective 镜头到元素平面的距离z=0的平面上，perspective（300px）镜头距离元素表面位置是300px；像素越大，图越小
perspective-origin规定镜头在平面上的位置，默认是放在元素中间，镜头在z坐标固定时（perspective（0），perspective-origin：150px 150px是
右下；perspective-origin：-150px -150px是左上
animation动画属性 name duration timing-function delay iteration-count：执行次数；direction 是否应该轮流范放行播放动画
sessionStorage页面关闭，数据就会清空
localStorage，除非手动清理，数据会一直存在
Cookie：内存小只有4kb，如果没有设置过期时间，会保存到内存中，会随着浏览器关闭，生命周期也会结束，如果设置过期时间，被保存在硬盘中，浏览器关闭也不会结束，过期时间结束，才会消失
VUE
MVVM model-view-viewModel简写，模型-视图-视图模型，双向绑定
model是后端传递的数据，view是页面，viewModel是view和model的桥梁
model转换为view，后端传递的数据转换成页面，数据绑定
view转换model，所看到的的页面转换为后端的数据，实现方式：DOM事件监听
MVC model-view-controller 模型-视图-控制器 controller是指页面业务逻辑
MVC是单向通信，视图和模型通过controller承上启下
mvvm实现的业务逻辑组件的重用，让开发更高校，结构更清晰，增加代码的复用性
mvvm主要解决了mvc中大量的dom操作使页面渲染性能降低，加载速度变慢，影响用户体验
区别：vue数据驱动，通过数据来显示视图层而不是节点操作
vue生命周期 beforeCreate（数据对象data，挂载元素el都为undefined，未初始化）、created（数据对象data出来了，el还没有）、beforeMount，（实例的$el和data都初始化了，但是还没有挂载之前都是虚拟阶段，data。message还未 替换），Mounted（vue实例挂载完成，data.mesaage渲染成功）、beforeuplode（） ，uploaded，beforeDestroy（销毁前），destored（销毁后，对data改变不会触发周期函数，vue市里已经结束事件监听一级dom绑定，dom结构依然存在）
生命周期就是vue实例从创建到销毁的过程，创建-初始化-编译模板-挂载dom-渲染-更新-渲染，卸载等一系列过程
生命周期作用：有多个事件钩子，让我们在控制整个vue实例过程中更容易形成好的逻辑
创建前后，载入前后，更新前后，销毁前后
created：实例已经创建完成之后调用，
mounted，el被新创建的vm。$el替换病挂载到实例上去之后调用该钩子，
actived：keep-alive组件激活时调用
mounted已经完成dom渲染
