CSS零碎知识

position定位

• static  默认值
• relative 相对定位，升起来，但不脱离文档流（实际位置不变，显示位置变化）;
• absolute 绝对定位，定位基准是祖先中最近的定位非static的元素。
• fiexd 固定定位，定位基准是视口viewpor，但加上transform就变了，手机上尽量不要用，bug非常多。
• sticky 粘滞定位，向下滑动屏幕时，sticky会粘在屏幕上方。适合导航.

创建层叠上下文的情况，z-index

• z-index 不为auto时，加上定位relative absolute，当container里不写z-index时，小世界范围为-无穷到+无穷，写z-index=0时，范围为0-+无穷。

• flex里会创建

• opacity不为1时会创建上下文。

• 有transfotm时

• flex,grid里index不是auto

  left: 50%; top: 50%; transform:translate(-50%,-50%);

可以让子元素在父元素的中心位置。

浏览器渲染过程

1. 根据HTML构建HTML树（DOM）
2. 根据CSS构建CSS树（CSSOM）
3. 将两棵树合并成一颗渲染树（render tree）
4. Layout布局（文档流、盒模型、计算大小和位置）
5. Paint绘制 （边框颜色、文字颜色、阴影等）
6. Compose合成 （根据层叠关系展示画面)

更新样式

1. JS/CSS > 样式 > 布局 > 绘制 > 合成
2. JS/CSS > 样式 > 绘制 > 合成
3. JS/CSS > 样式 > 合成

如何知道如何更新？ 使用开发者工具自己尝试或者访问CSSTriggers.com

transform

• translate 位移

  transform: translateX(50px); transform: translate(50px,50px);

• scale 缩放或扩大

  transform: scaleX(1.5);

• rotate 旋转

transform: rotate(45deg);默认绕Z轴转动

• skew 倾斜

transform: skewX(15deg);

CSS动画的两种做法(transition和animation)

transition

#demo{
    transition:all 1s ease-in-out 3s;
}

transition:属性名 时常 过渡方式 延迟，配合tranform使用。

all可以换成其它过渡属性，多个属性用都逗号隔开，不是所有的属性都可以过渡；特别注意: display:block>none无法过渡，但是visibility:visible>hidden可以过渡

animation

@keyframes xxx {
    from {
        transform:translateX(0%);
    }
    to {
        transform:tanslateX(100%);
    }
}

@keyframes xxx {
  0% {
    transform: none;
  }
  66.66%{
    transform: translateX(200px);
  }
  100%{
    transform: translateX(200px) translateY(100px);
  }
}

可以用着两种方式设置动画轨迹

animation: .5s heart linear infinite alternate-reverse;

按代码顺序分别为animation：时长 动画名 过渡方式 次数 方向