CSS 知识总结

层叠样式表 (CSS）

css是由蒂姆·伯纳斯-李在1994年提出的，官方定义css是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现，简化来说，就是美化页面的一种语言。

css作用

1. 结构与样式分离的方式,便于后期维护与改版（简化代码）
2. 样式定义精确到像素的级别
3. 可以用多套样式,使网页有任意样式切换的效果

css布局

1. float布局（适合兼容ie）
2. flex布局（方便实现响应式网站，网站兼容性较高）
3. grid布局（比flex布局更强大，但是兼容性不好，适用于开发只兼容最新版本浏览器的网站）

css定位（position）

position的属性值和作用

1. static（默认值，指定该元素使用正常的布局行为，top、bottom、left、right、z-index都对元素无效）
2. relative （相对于默认位置（即static时的位置）进行偏移，且不改变页面布局）
3. absolute （被设置的元素脱离文档流，相对于上级元素（最近使用定位元素且属性值不为static的上级元素）进行偏移）
4. fixed （被设置的元素脱离文档流，相对于视口（viewport，浏览器窗口）进行偏移）
5. sticky （页面滚动，父元素开始脱离视口时，relative定位自动切换为fixed定位；等到父元素完全脱离视口时，fixed定位自动切换回relative定位，大多用于导航，但是兼容性很差）

层叠上下文

1. 文档根元素（html元素）
2. position 值为 absolute或 relative且 z-index 值不为 auto 的元素
3. position 值为 fixed或 sticky的元素
4. flex 或grid 容器的子元素，且 z-index 值不为 auto
5. opacity 属性值小于 1（背景颜色rgba中的透明度只影响颜色，对元素整体无影响，所以无法创建层叠上下文）
6. mix-blend-mode 属性值不为 normal 的元素
7. transform、filter、perspective、clip-path、mask / mask-image / mask-border的属性值不为none
8. isolation 属性值为 isolate 的元素
9. -webkit-overflow-scrolling 属性值为 touch 的元素
10. will-change 值设定了任一属性而该属性在 non-initial 值时
11. contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素

css动画

浏览器渲染流程

1. 构建dom树（css树和html树）
2. 构建render树 （将css树和html树进行合并）
3. 布局render树 （计算渲染元素的位置以及大小）
4. 绘制render树 （使用布局计算出来的大小和位置通过显卡画出来显示到屏幕上）
   

浏览器的重排和重绘

1. 重排是指重新生成布局，重新排列元素，出现重排必然有重绘，会导致DOM脚本执行效率低，我们可以通过减少重排，来实现优化。
   引起重排的常见元素有width height margin padding display border position overflow
   引起重排的常见方法有clientWidth clientHeight clientTop clientLeft offsetWudth offsetHeight offsetTop offsetLeft scrollWidth scrollHeight scrollTop scrollLeft scrollIntoView() scrollTo() getComputedStyle() getBoundingClientRect() scrollIntoViewIfNeeded()
2. 重绘是指某些元素的外观被改变

css动画由transition和animation两大部分组成

一、transition
transition用于指定状态变化所需要的时间。

1. transition-property （过渡属性的名称）
2. transition-duration （以秒或毫秒为单位指定过渡动画所需的时间）
3. transition-timing-function （动画状态变化速度）
4. transition-delay （过渡效果开始作用之前需要等待的时间）

transition的缺点 需要事件触发，所以没法在网页加载时自动发生，是一次性的，不能重复发生，除非多次触发，只能定义开始状态和结束状态，不能定义中间状态，只能定义一个属性的变化，不能涉及多个属性，为了解决这些问题，提了出animation。

二、animation
animation指定动画一个周期持续的时间，以及动画效果的名称

1. animation-name（由@keyframes定义的动画序列）
2. animation-duration （指定一个动画周期的时长）
3. animation-timing-function（动画状态变化速度）
4. animation-delay(动画开始作用之前需要等待的时间)
5. animation-iteration-count （定义动画在结束前运行的次数，可以是1次也可以是无限循环）
6. animation-direction（指定动画是否反向播放）
7. animation-fill-mode（设置CSS动画在执行之前和之后如何将样式应用于其目标）
8. animation-play-state （定义一个动画是否运行或者暂停）

三、keyframes
keyframes（关键帧）用于创建动画，然后配和animation的属性值animation-name使用，用于控制动画序列的中间步骤。

@keyframes slidein {
  from {
    transform: translateX(0%); 
  }

  to {
    transform: translateX(100%);
  }
}

1. slidein是动画的名称
2. from相当于0%，to相当于100%，定义动画在0%到100%之间元素属性值的变化（属性值重复被定义的过程）