css定位

层次：内联子元素（文字）> 浮动元素（float，脱离文档流）> 块级子元素（div）> border > background
注：后出现的文字会盖住之前的文字

position

position: static | relative | absolute | fixed | sticky;

1. static: 默认的，呆在文档流里
2. relative: 相对位置，升起来但不脱离文档流
3. absolute: 绝对位置
4. fixed: 固定位置（相对于视口，手机端尽量不用）

重点

1. absolute（子）和relative（父）一般共同使用
   absolute：相对于祖元素中第一个不是static的元素
2. 写了absolute，fixed一定要补 left & top
3. 文字内容不换行：white-space: nowrap;
4. 同一个世界的z-index才会相互比较（作用域）

创建层的上下文属性：

1. z-index不等于auto且position为relative/absolute
2. opacity小于且不等于1
3. position: fixed
4. flex
5. transform

经验

1. 盒模型中的背景为border外沿区域
2. float怎么脱离文档流：比div高一层，比文字低一层
3. 常用position: fixed/absolute/relative
4. z-index定位元素&层叠上下文（默认为html）
5. 负的z-index可能不会在一个元素下面是因为那个元素变成了一个层叠上下文（不在同一个作用域）

css动画

影视每秒24帧，游戏每秒30帧

渲染过程：

三种更新方式（一般用JS来更新样式）

1. 全走：div.remove()会触发当前消失，其他元素relayout
2. 跳过layout：div.style.background('red')改变背景颜色，直接repaint+composite
3. 跳过layout+paint：改变transform，只需要composite

优化css动画的方式：

1. left改成transform（不用repaint）
2. js优化：用requestAnimationFrame代替setTimeout/setInternal
3. css优化：用will-change或translate

transform

1. 位移：translate
2. 缩放：scale
3. 旋转：rotate
4. 倾斜：skew
   注：inline元素不支持transform，需要先转为block

translate

#demo:hover{
  transform: translateX(50px);
  transform: translateY(50%);
  transform: translateZ(-200px);
}

#demo{
 transform: translate(-50%, 50%);
}
/*绝对定位中居中显示*/

scale

#demo:hover{
  transform: scaleX(1.5);
  transform: scaleY(1.5);
  transform: scale(1.5,0.5);
}

rotate
一般用于360度旋转制作loading

#demo:hover{
  transform: rotateZ(45deg);
  transform: rotate3d(1,1,1,45deg);
}

skew

#demo:hover{
  transform: skewX(15deg);
}

组合使用

#demo:hover{
  transform: scale(1.5) translate(-100%, 100%) ;
}

取消所有

#demo:hover{
  transform: none;
}

transition 过渡

作用：补充中间帧

语法：

• transition：属性名 时长 过渡方式 延迟

#demo{
    transition: left 200ms linear;
}

• 可以用逗号分隔属性

#demo{
    transition: left 200ms, top 400ms;
}

• 可以用all代表所有属性

#demo{
    transition: all 200ms;
}

中间点：

1. transform

#demo{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 50px;
  transition: transform 1s linear;
}

#demo.b{
  transform: translateX(200px);
}
#demo.c{
  transform: translateX(200px) translateY(100px);
}

button.onclick = ()=>{
  
  demo.classList.add('b')
  setTimeout(()=>{
    demo.classList.remove('b')
    demo.classList.add('c')
  },1000)
}

2. animation
语法：
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名

• 时长：1s/1000ms
• 过渡方式：和transition取值一样
• 次数：3 / 2.4 / infinite
• 方向：reverse / alternate / alternate-reverse
• 填充模式：none / forwards / backwards / both
• 是否暂停：paused / running

#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
  animation: .5s heart infinite alternate-reverse;
  
}
@keyframes heart {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
}

如何让画面停在最后一帧 (forwards)：

#demo.start{
  animation: xxx 1.5s forwards;
}