CSS-进阶知识

// 注意
1. css加载不会阻塞DOM树的解析
2. css加载会阻塞DOM树的渲染
3. css加载会阻塞后面js语句的执行
----------------------------------------------------------------------------------------------
// 其他
1. currentColor 代表了当前元素被应用上的 color 颜色值，你这可以这么理解，CSS 里你可以在任何需要写颜色的地方
  使用 currentColor 这个变量，这个变量的值是当前元素的 color 值。如果当前元素没有在 CSS 里显示地指定一个 color 值，
  那它的颜色值就遵从 CSS 规则，从父级元素继承而来
2. 一般来说，行内元素是不可以设置宽高的，如果想给行内元素设置宽高，则需要将其 display 设置为 block/inline-block/flex/inline-flex
  （使用 position:absolute/fixed 或 float：left/right，在 computed 中查看 display 会发现属性值也为 block，所以这两个方法用的原理也是这个）
3. 当 margin 或者 padding 取值是百分比的时候，无论是 left，right 或者 top，bottom，都是以父元素的 width 为参考物
4. css modules 要覆盖其他组件的样式需要使用 :global 而不是 /deep/
----------------------------------------------------------------------------------------------
// 盒模型
1. box-sizing: border-box
2. offsetHeight/offsetWidth = border + padding + content
3. clientHeight/clientWidth = padding + content
4. scrollHeight/scrollWidth = padding + content（如果子元素比父元素高或宽则以子元素为准计算 content ）
5. ele.scrollTop // 子元素超出 ele 元素的高度
6. ele.scrollLeft // 子元素超出 ele 元素的宽度
----------------------------------------------------------------------------------------------
// margin
1. margin纵向重叠:
    相邻元素的margin-top和margin-bottom会重叠
    空白内容的<p />也会重叠
    横向不会重叠
2. margin负值:
    margin-top和margin-left负值,元素向上、向左移动
    margin-right负值,右侧元素左移,自身不受影响
    margin-bottom负值,下方元素上移,自身不受影响
----------------------------------------------------------------------------------------------
// BFC
1. 块级格式化上下文
2. 一块独立渲染区域,内部元素的渲染不会影响边界以外的元素
3. 作用：
    1. 清除浮动
    2. 阻止 margin 发生重叠（两个独立的 BFC 之间的 margin 不会重叠）
    3. 阻止元素被浮动的元素覆盖
4. 形成BFC的常见条件:
    1. float不是none
    2. overflow不是visible
    3. position是absolute或fixed
    4. display是flex或inline-block
----------------------------------------------------------------------------------------------
// 圣杯布局和双飞翼布局
1. 都是基于float布局
2. 圣杯布局和双飞翼布局的目的
    三栏布局,中间一栏最先加载和渲染(内容最重要)
    两侧内容固定,中间内容随着宽度自适应
    一般用于pc网页
3. 圣杯布局和双飞翼布局的技术总结
    1. 使用float布局
    2. 两侧使用margin负值,以使和中间内容横向重叠
    3. 防止中间内容被两侧覆盖
    4. 圣杯布局用padding, 留出两侧的空间, 左边使用 margin-left: -100% + right: 宽度, 右边使用 margin-right: -宽度
    5. 双飞翼用margin, 留出两侧的空间, 左边使用 margin-left: -100%, 右边使用 margin-left: -宽度
4. 圣杯布局示例
    HTM：
    <header>头</header>
    <div class="main">
        <div class="center col">中间</div>
        <div class="left col">左边</div>
        <div class="right col">右边</div>
    </div>
    <footer>尾</footer>
    CSS：
    body {
      min-width: 550px;
    }
    header {
      background-color: teal;
    }
    footer {
      clear: both;
      background-color: thistle;
    }
    .main {
      padding: 0 150px 0 200px;
    }
    .left {
      width: 200px;
      background-color: tomato;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }
    .right {
      width: 150px;
      background-color: blue;
      /* margin-right: -150px; */
      /* margin-right 也可以换成以下 */
      margin-left: -150px;
      position: relative;
      right: -150px;

    }
    .center {
      width: 100%;
      background-color: yellow;
    }
    .col {
      float: left;
    }
5. 双飞翼布局示例
    HTML：
    <div class="main col">
        <div class="main-box"></div>
    </div>
    <div class="left col"></div>
    <div class="right col"></div>
    CSS：
    body {
      min-width: 550px;
    }
    .main {
      width: 100%;
      height: 200px;
      background-color: aqua;
    }
    .main-box {
      margin: 0 190px 0 190px;
    }
    .left {
      width: 190px;
      height: 200px;
      background-color: brown;
      margin-left: -100%;
    }
    .right {
      width: 190px;
      height: 200px;
      background-color: chartreuse;
      margin-left: -190px;
    }
    .col {
      float: left;
    }
----------------------------------------------------------------------------------------------
// 居中方法
1. 水平居中:
    inline元素: text-align: center
    block元素: margin: auto
    absolute元素: left: 50% + margin-left负值
2. 垂直居中:
    inline元素: line-height的值等于height的值
    absolute元素: top: 50% + margin-top负值
    absolute元素: transform(-50%, -50%)
    absolute元素: top、left、bottom、right都是0 + margin: auto
----------------------------------------------------------------------------------------------
// 图文样式
1. line-height: 行高是指文本行基线间的垂直距离,不是两行文字之间的距离
2. line-height继承
    写具体数值,如30px则继承该值,30px
    写比例,如1.5则继承该比例,fontsize * 1.5,子级计算
    写百分比,如200%则继承计算出来的值,父级计算
3. 如果div不设置高度时,div的高度是由line-height控制的
4. line-height比font-size高一个行距,上下各一半
----------------------------------------------------------------------------------------------
// rem
1. px是绝对长度单位,最常用
2. em是相对长度单位,相对当前元素内文本的字体大小,不常用
3. rem是相对长度单位,相对根元素的字体大小,用于响应式布局
4. 配合媒体查询实现响应式布局,动态的改变html的font-size的值
----------------------------------------------------------------------------------------------
// 响应式vw/vh,网页视口额高度/宽度
1. 网页视口尺寸
    window.screen.height/width //屏幕高度/宽度
    window.innerHeight/innerWidth // 网页视口高度/宽度,去除上下
    document.body.clientHeight // body高度
2. vh 网页视口高度的 1/100
3. vw 网页视口宽度的 1/100
4. vmax 指的是网页视口最长边的 1/100
5. vmin 指的是网页视口最短边的 1/100
----------------------------------------------------------------------------------------------
// 浏览器前缀
// 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀
1. -webkit- // chrome、safari
2. -moz- // 火狐
3. -ms- // IE
4. -o- // opera
----------------------------------------------------------------------------------------------
// 选择器, 兼容IE8及以上
1. 子元素选择器: 父元素 > 子元素 // 匹配父元素的子元素,不包括孙子
2. 紧接兄弟选择器: 元素 + 兄弟相邻元素 // 匹配元素的第一个兄弟(同一个父亲)
3. 通用兄弟选择器: 元素 ~ 兄弟元素 // 匹配元素同级的所有兄弟(同一个父亲)
4. 属性选择器: ele[attribute] // 匹配元素属性相同的所有元素
5. 属性选择器: ele[attribute = '值'] // 匹配元素属性值等于值的所有元素
6. 属性选择器: ele[attribute ~= '值'] // 匹配元素属性值包含等于值的所有元素(用于属性值多个)
7. 属性选择器: ele[attribute ^= '值'] // 匹配元素属性值开头等于值的所有元素(只适合单个属性值)
8. 属性选择器: ele[attribute $= '值'] // 匹配元素属性值结尾等于值的所有元素
9. 属性选择器: ele[attribute *= '值'] // 匹配元素属性值包含值的所有元素
10. 属性选择器: ele[attribute |= '值'] // 匹配元素属性值以值或以值-开头的所有元素(只适用单个属性值)
----------------------------------------------------------------------------------------------
// 动态伪类,不存在html中只有当用户和网站交互的时候才体现
1. 锚点伪类: :link、:visited
2. 用户行为伪类: :hover、:active、:focus
3. UI元素状态伪类: 表单属性 // IE9+
    enabled // 可输入
    disabled // 不可输入
    checked // 选中
4. ele:first-child // 匹配属于其父元素的首个子元素的每个ele元素
5. ele:last-child // 匹配属于其父元素的最后一个子元素的每个ele元素
6. ele:nth-child(n/odd/even) // 匹配属于其父元素的第n个子元素的每个元素,不论元素类型
7. ele:nth-last-child(n/odd/even) // 匹配属于其父元素的第n个子元素的每个元素,不论元素类型,倒数
8. ele:nth-of-type(n/odd/even) // 匹配属于父元素的特定类型的第n个子元素的每个元素
9. ele:nth-last-of-type(n/odd/even) //匹配属于父元素的特定类型的第n个子元素的每个元素,倒数
10. ele:first-of-type // 匹配属于其父元素的特定类型的首个子元素的每个元素
11. ele:last-of-type //匹配属于其父元素的特定类型的最后一个子元素的每个元素
12. ele:only-child // 匹配属于其父元素的唯一子元素的每个元素
13. ele:only-of-type // 匹配属于其父元素的特定类型的唯一子元素的每个元素
14. ele:empty // 匹配没有子元素(包括文本节点)的每个元素
15. ele:not(ele/selector) // 匹配非指定元素/选择器的每个元素
----------------------------------------------------------------------------------------------
// 权值
1. 行内样式(1000) > ID选择器(100) > 类、属性选择器、伪类选择器(10) > 元素、伪元素(1) > *(0)
2. 包含更高权重选择器的一条规则拥有更高的权重
3. ID选择器的权重比属性选择器高
4. 带有上下文关系的选择器比单纯的元素选择器权重要高
5. 与元素挨得近的规则生效
6. 最后定义的这条规则会覆盖上面与之冲突的规则
7. 无论多少个元素组成的选择器都没有一个属性选择器权重高
8. 通配符选择器权重是0,被继承的css属性也带有权重,也是0
----------------------------------------------------------------------------------------------
// 伪元素
1. ele::first-line // 匹配元素的第一行,只用于块级元素
2. ele::first-letter // 匹配元素中文本的首个字母,只用于块级元素
3. ele::before // 在元素的内容前面插入新内容,配置content使用
    第一个子元素
    行级元素
    内容通过content写入
    标签中找不到对应标签
4. ele::after // 在元素的内容后面插入新内容,配置content使用
    最后一个子元素
    行级元素
    内容通过content写入
    标签中找不到对应标签
5. ele::selection // 设置选中文本后的背景色和前景色(默认蓝底白字)
----------------------------------------------------------------------------------------------
// 圆角,顺时针
1. border-top-left-radius
2. border-top-right-radius
3. border-bottom-left-radius
4. border-bottom-right-radius
5. border-radius: px/em/%
6. 四个值: 左上、右上、右下、左下
7. 三个值: 左上、(右上、左下)、右下
8. 二个值: (左上、右下)、(右上、左下)
9. 一个值: 四个值一样
----------------------------------------------------------------------------------------------
// 边框图片
1. border-image-soure: url('')/none
2. border-image-slice: px/%/fill // 图片的边界向内偏移
3. border-image-width: px/%/auto // 图片边界的宽度
4. border-image-outset: px/%/number // 向外扩展
5. border-image-repeat: stretch(拉伸)/repeat(重复)/round(铺满)
6. border-image: source slice width outset repeat
----------------------------------------------------------------------------------------------
// 阴影,设置一个或多个下拉阴影的框
1. box-shadow: h-shadow/v-shadow/blur/spread/color/inset/outset
2. h-shadow // 水平
3. v-shadow // 垂直
4. blur // 模糊
5. spread // 扩展
6. color // 颜色
7. inset // 内阴影
8. outset // 外阴影
----------------------------------------------------------------------------------------------
// 文本阴影
1. text-shadow: 水平偏移/垂直偏移/模糊距离/rgba
2. text-shadow: 5px 5px 5px rgba(255, 0, 0 , .5)
----------------------------------------------------------------------------------------------
// 文本换行,规定自动换行的处理方式
1. word-break: noraml/break-all/keep-all
    noraml: 正常(默认)
    break-all: 英文充满,中文和默认一样
    keep-all: 标点或省略号
----------------------------------------------------------------------------------------------
// 文本溢出
1. text-overflow: clip/ellipsis/自定义
    clip: 隐藏
    ellipsis: 三个点省略号
    自定义: 自定义样式,火狐才兼容
2. 要实现文本溢出还要加
   white-space: nowrap
   overflow: hidden
----------------------------------------------------------------------------------------------
// 文本最后一行对齐
1. text-align-last: auto/left/right/center/justify/start/end/instial/inherit
2. text-align-last属性只有在text-align属性设置为justify时才起作用
----------------------------------------------------------------------------------------------
// 长单词或url换行
1. word-wrap: noraml/break-word
----------------------------------------------------------------------------------------------
// @font-face
@font-face{
  font-family: '自定义名称';
  src: url('名称.eot'); // IE9
  src: url('名称.eot?#iefix')format('embedded-opentype'); //IE6-8
  url('名称.ttf')format('truetype'); // 手机端
  url('名称.woff')format('woff'); // 通用
  url('名称.svg#名称')format('svg'); // IOS
}
----------------------------------------------------------------------------------------------
// iconfont
// @font-face ：解决各浏览器兼容
1. OpenType格式(.otf) 以TrueType为基础，也是一种原始格式，但提供更多的功能。
2. TrueType格式(.ttf) Windows和Mac上常见的字体格式，是一种原始格式，因此它并没有为网页进行优化处理。/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
3. Embedded Open Type格式(.eot) IE专用字体格式，可以从TrueType格式创建此格式字体。/* IE9 */     /* #iefix IE6-IE8 */
4. Web Open Font格式(.woff) 针对网页进行特殊优化，因此是Web字体中最佳格式，它是一个开放的TrueType/OpenType的压缩版，同时支持元数据包的分离。/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
5. SVG格式(.svg) 基于SVG字体渲染的格式。/* iOS 4.1- */
----------------------------------------------------------------------------------------------
// svg
1. svg实际为图片
2. 在iconfont网站下载的svg支持多颜色，如果要修改颜色则下载时需要去色或者下载后把js中的fill属性删掉
3. 在iconfont网站下载的icon是默认无色的不管在网站调成什么颜色，需通过color修改颜色
4. 在iconfont网站通过symbol引入的方式就是使用svg
----------------------------------------------------------------------------------------------
// 背景图像,IE9+
1. background-clip: border-box/padding-box/content-box
    border-box: 背景被裁剪到边框盒区域
    padding-box: 背景被裁剪到内边距框
    content-box: 背景被裁剪到内容框
2. background-origin: border-box/padding-box/content-box // 相对于background-position作为偏移量
3. background-size: px/$/cover/contain // 背景图片的大小
    cover: 等比例缩放填充整个容器
    contain: 至少有一边紧贴容器
4. background-image: url('') // 可多个url,前面的图片会覆盖后面的图片
5. background: color position size repeat origin clip attachment image
----------------------------------------------------------------------------------------------
// 线性渐变,IE10+
1. background: linear-gradient(方向, 颜色1, 颜色2, ...) // 方向默认不写从上到下
2. background: linear-gradient(to right, 颜色1, 颜色2, ...)
3. background: linear-gradient(to left bottom, 颜色1, 颜色2, ...)
4. background: linear-gradient(90deg, red 10%, green 50%, blue 80%, yellow 90%, orange 100%)
5. -webkit-内核的方向是开始方向
6. -moz-、-o-内核的方向是结束方向
// 线性重复渐变
1. background: repeating-linear-gradient(90deg, red 0%, blue 10%, red 20%)
----------------------------------------------------------------------------------------------
// 径向渐变,IE10+
1. background: radial-gradient(red, yellow, blue)
2. background: radial-gradient(red 50%, blue 70%)
3. background: radial-gradient(ellipse/circle)
    ellipse: 椭圆
    circle: 圆形
4. background: radial-gradient(closest-side/closest-corner/farthest-side/farthest-corner)
    closest-side: 最近边
    closest-corner: 最近角
    farthest-side: 最远边
    farthest-corner: 最远角
// 径向重复渐变
1. background: repeating-radial-gradient(red 0%, blue 10%, red 20%)
----------------------------------------------------------------------------------------------
// 2D旋转、平移、缩小、扭曲
1. transform: rotate(90deg) // 顺时针旋转90度,正数顺时针,负数逆时针
2. transform: translate(50px, 50px) // 水平和垂直都平移50px
3. transform: scale(0.5, 0.5) // 等比例缩小0.5倍,只写一个参数时,另一个默认为0
4. transform: skew(30deg, 30deg) // x轴正数逆时针,负数顺时针,y轴正数顺时针,负数逆时针,只写一个参数时,另一个默认为0
// 3D旋转、平移、缩小、扭曲
5. transform: rotate3d(x, y, z, 角度)
   transform: rotate3d(1, 0, 0.1, 45deg)
6. transform: translate3d(x, y, z)
   transform: translate3d(200px, 200px, 200px)
7. transform: scale3d(x, y, z)
   transform: scale3d(0.5, 0.5, 0.5)
8. transform-origin: left top/25% top/x y z // 中心点坐标系统
9. transform-style: flat/preserve-3d // 显示方式
10. perspective: 500px/none // 观察者与平面的距离
11. perspective-origin: x y/top/bottom/500px
12. backface-visibility: visible/hidden // 背面是否可见
----------------------------------------------------------------------------------------------
// 贝塞尔函数，和过滤、动画的运动有关
1. linear // 匀速
2. ease // 缓慢开始，突然加速，最后变慢
3. ease-in // 缓慢开始，逐渐加速直到结束
4. ease-out // 突然开始，逐渐减速到结束
5. ease-in-out // 缓慢开始，然后加速，最后减速至结束
6. 自定义，可以到 http://yisibl.github.io/cubic-bezier 进行自定义
 ----------------------------------------------------------------------------------------------
// 过渡,IE10+，指定一个或多个 css 属性过度效果，多个属性用逗号相隔
1. transition-property: all/具体的属性名称/none // 设置要过渡的属性,默认是all
2. transition-duration: 2s // 过渡的持续时间,默认是0秒
3. transition-timing-function: linear(匀速)/ease(默认)/ease-in(由慢到快)/ease-out(由快到慢)/ease-in-out(慢-快-慢) // 过渡类型,推荐用ease-in-out
4. transition-delay: 2s // 过渡延迟时间,默认0秒
5. transition: property duration timing-function delay // 简写
6. 类似是 animation 的阉割版，只能指定开始和结束的状态并且需要事件来触发
7. 事件
  1. transitioncancel // 取消事件
  2. transitionend // 结束事件，如果有多个属性，则会触发多次
  3. transitionrun // 进行事件
  4. transitionstart // 开始事件，因为有 delay 属性，所以不一定是真正的开始
8. 不是所有的属性都可以用 transition 来做动效，以下不支持
  1. background-image
  2. float
  3. display
  4. position
  5. visibility
  6. ...
----------------------------------------------------------------------------------------------
// 动画,IE10+，指定一组或多组动画，每组之间用逗号相隔
1. animation-name: 动画名称/none // 动画名称
2. animation-duration: 2s // 动画持续时间,默认0秒
3. animation-timing-function: linear(匀速)/ease(默认)/ease-in(慢-快)/ease-out(快-慢)/ease-in-out(慢-快-慢) // 动画类型
4. animation-delay: 2s // 动画延迟时间,默认0秒
5. animation-iteration-count: infinite/1(默认) // 动画循环,默认执行一次
6. animation-direction: normal/reverse(反方向)/alternate(正常-反方向-正常,循环)/alternate-reverse(反方向-正常-反方向,循环) // 动画运动方向
7. animation-fill-mode: forwards(结束时)/backwards(开始时)/both(开始或结束)/none(默认) // 动画不播放时的状态
8. animation-play-state: running(运行,默认)/paused(暂停动画) // 运行或暂停
9. animation: name duration timing-function delay iteration-count direction fill-mode play-state forwards // 缩写，forwards 表示在动画结束后保存最后一帧的样子
10. 创建动画
    @keyframes '动画名称'{
        from { css }
        to { css }
    }
11. 使用动画
    animation '动画名称' 2s infinite ease-in-out .5s // 参考9
12. window.requestAnimationFrame(fn) // 控制动画，动画流畅更新频率要60帧/s,即16.67ms更新一次视图
    1. 优点：后台标签或隐藏 iframe 中，RAF 会暂停，而使用 setTimeout 会继续执行，还要手动控制频率
13. 帧动画和过渡动画都是用 animation，帧动画使用 steps(5) 控制速度，过渡动画使用 linear 自动控制
14. webkit-动画的事件监听：webkit-animationEnd、webkitAnimationStart、webkitAnimationIteration
----------------------------------------------------------------------------------------------
// animation 和 transition 的区别
1. 动画周期：都支持
2. 动画的速度曲线：都支持
3. 动画何时开始（delay）：都支持
4. 动画播放次数控制：animation 支持，transition 只能触发一次
5. 是否可以逆向播放：animation 支持，transition 不支持
6. 动画暂停以及启动：animation 支持，transition 不支持
7. 设置动画停止之后位置状态（fill-mode）：animation 支持，transition 不支持
8. 是否可以自动播放：animation 支持，transition 不支持（可以 hover 或者 js 触发）
9. 控制多个关键帧：animation 支持，transition 不支持（只有开始和结束）
----------------------------------------------------------------------------------------------
// 动画注意事项
1. css 动画可以开启 GPU 加速，js 动画同样可以设置 translate3d() 或 matrix3d() 来开启 GPU 加速
2. GPU 有图像存储限制，一但 GPU 的存储空间用完，速度会急剧下降
3. 不是所有 css 属性都能获得 GPU 加速
4. GPU 加速也有自己的开销，可以由 css 属性 will-change 来解决，这属性可以告诉 GPU 我可能需要进行 GPU 动画
5. 大多数 css 属性都会引起布局更改和重新绘制，因此尽可能优先考虑使用 opacity 和 css transition
6. 如何选择
  1. 两个状态之间的简单切换，使用 css 动画
  2. 复杂动画，使用 js 动画，可控制性更好
----------------------------------------------------------------------------------------------
// Web Animation API
1. 方式1：KeyframeEffect（描述动画属性） + Animation（动画播放控制）
  1. KeyframeEffect
    1. 创建一组动画的属性和值，称为关键帧，然后使用 Animation() 构造函数播放这些内容
    2. new KeyframeEffect(target, keyframes, options)
  2. Animation
    1. 提供播放控制、动画节点或源的时间轴，可以接受 KeyframeEffect 构造函数创建的对象作为参数
    2. 常用的方法
      1. cancel，取消
      2. finish，完成
      3. pause，暂停
      4. play，播放
      5. reverse，逆转播放方向
    3. 事件监听
      1. event 方式：animation.onfinish = function() {}
      2. promise 方式：animation.finished.then(() => {})
  3. 代码示例
    const kyEffect1 = new KeyframeEffect(el, {
      transform: ['translateX(0)', 'translateX(500px)']
    }, {
      duration: 3000,
      fill: 'forwards'
    })
    const ky1 = new KeyframeEffect(kyEffect1) // 类似于继承也可省略这一步
    const animate = new Animation(ky1)
    console.log(animate)
2. 方式2：el.animate，DOM 元素上自带了 animate 方法 // 更方便
  1. 任何 Element 都具备该方法
  2. animate(keyframes, options)
  3. el.getAnimations，获取所有通过 el.animate 创建的动画实例
----------------------------------------------------------------------------------------------
//  其他动画方案
1. 目前动画的绘制技术
  1. canvas
  2. svg
  3. html
2. 动画方案
  1. canvas
    1. 优点
      1. 定制型更强
      2. 动画性能高
    2. 缺点
      1. 事件分发由 canvas 处理，绘制的内容事件需要自己做处理
      2. 依赖于像素，无法高效保真
      3. 文本渲染较弱
      4. 自己编写太麻烦
  2. 图片动画
    1. gif：原理是多张静态图片压缩组合在了一起，长连贯播放
      1. 优点
        1. 开发成本低
        2. 沟通成本少
        3. 兼容性好
      2. 缺点
        1. 体积较大
        2. 支持的透明度有限
        3. 只能循环播放，不好控制
    2. apng：原理是通过算法计算帧之间的差异，只存储帧之前的差异，而不是存储全帧，使得 apng 文件大小有显著减少
      1. 优点
        1. 相比 gif 可以容纳更多的色彩
        2. 向下兼容 png 格式图片
        3. 支持透明通道
        4. 体积比 gif 要小
      2. 缺点
        1. 兼容性问题
        2. 不易控制
    3. webp：新的图片格式，尺寸缩小了30%，在压缩率上全面超越 gif 和 apng
  3. 帧动画：通常是一张一张序列帧连续播放的效果，100张就需要请求100次，一般我们做成精灵图
    1. 优点
      1. 适配性好
      2. 开发成本中
    2. 缺点
      1. 合成的精灵图较大，不同屏幕分辨率可能失真
  4. svg 动画
    1. svg 是一种用于描述二维的矢量图形，基于 XML 标记语言
    2. 它允许沿着运动路径允许，且又很多自己的元素标签，如 animate 元素
  5. lottie 动画
    1. lottie 可以渲染类型为 svg、canvas、html
    2. 通过官方的 lottie 库，解析 lottie 的配置文件.json 文件，然后根据设计师画图的参数，渲染出相对应的内容
  6. svga 动画
    1. 原理是设计师将动画脚本导出，然后再对应的客户端重新合成这些位图，与 lottie 的区别在与导出方式以及库解析方式不一样，
       都有各自的标准，svga 使用的是另一套逻辑，svga 不关心关键帧，因为 svga 里面的每一帧都是关键帧，也就是说，svga 已经
       在导出动画的时候，就把每一帧的信息都计算好了，这样 player 也就不用关心插件计算的过程
    2. 缺点：需要与设计师多次沟通，询问 ImageKey
  7. vap 动画
    1. vap 是企鹅电竞开发，用于播放酷炫动画的实现方案
    2. 相比 Webp、Apng 动图方案，具有高压缩率（素材更小），硬件解码（解码更快）的优点
    3. 原理是用视频进行播放
  8. video 动画：使用 video 播放 mp4 视频动画
----------------------------------------------------------------------------------------------
// flex布局,容器的属性
1. display: flex(将对象作为弹性伸缩盒显示)/inline-flex(不指定宽,默认由内容撑开) // 弹性的盒子
2. flex-direction: row(水平,默认)/row-reverse(水平相反)/column(垂直)/column-reverse(垂直相反)
3. 设置了flex布局里面的内容默认沿主轴排列,x轴为默认主轴,y轴为交叉轴
4. flex-wrap: nowrap(不换行)/wrap(换行,第一行在上方)/wrao-reverse(换行,第一行在下方) // 如何换行
5. flex-direction和flex-wrap的简写: flex-flow,值和原本的相同
6. justify-content: flex-start(左对齐)/flex-end(右对齐)/center(居中)/space-between(两端对齐)/space-around(两端对齐,内容之间的间隔比内容和边框的间隔大一倍) // 内容在主轴上的对齐方式
7. align-items: flex-start(交叉轴的起点对齐)/flex-end(交叉轴的终点对齐)/center(交叉轴的中点对齐)/baseline(第一行文字基线对齐)/stretch(默认值,如果内容不设置高度或auto将会自动撑开) // 在交叉轴上的对齐方式
8. align-content: flex-start(交叉轴的起点)/flex-end(交叉轴的终点)/center(交叉轴的中点)/space-between(两端对齐)/space-around(两端对齐,内容之间的间隔比内容和边框的间隔大一倍)/stetch(默认值,整体占满交叉轴) // 在多行的交叉轴的对齐方式
----------------------------------------------------------------------------------------------
// flex布局,内容的属性
1. order: 0(默认) // 定义内容排列顺序,数值越小越靠前,默认为0,可以为负数
2. flex-grow: 0(默认) // 定义内容放大比例,默认为0,都为1就会把剩下的空间等分的占满
3. flex-shrink: 1(默认) // 定义内容缩小比例,默认是1,0不会缩小
4. flex-basis: px // 定义内容占据的主轴空间(相当于宽和高),比width和height优先级高
5. align-self: center // 允许单个内容与其他内容不一样的对齐方式
6. flex: 0 1 auto // 2、3、4的简写,后两个属性可选
   flex: 1 // 平分,给需要瓜分的块加上这个属性
7. 遇到 flex 1 高度或宽度被子元素撑开时，需要设置该元素 min-width 或 min-heigh 等于 0 和 overflow 设置为不是 visible
----------------------------------------------------------------------------------------------
// 其他
1. 多列属性 columns 是 CSS3 的新增属性。可以指定子元素的列数
2. chinese-layout 这个是 css 布局库：display: grid; grid: var(--九宫格);gap: 10px;
----------------------------------------------------------------------------------------------
// CSS 提高页面性能的方法
1. 属性设置使用简写
2. 用 CSS 替换图片 // 比如箭头实现
3. 删除不必要的零和单位
4. 用 CSS 雪碧图替代单个文件加载
----------------------------------------------------------------------------------------------
// css变量
1. body {
  --foo: #7F583F; // 变量以--开头
}
2. a {
    color: var(--foo, #eee) // 使用变量要使用var函数,第二个参数是默认值,如果变量不存在就用默认值
}
3. 你可能会问,为什么选择两根连词线（--）表示变量？因为$foo被 Sass 用掉了，@foo被 Less 用掉了,为了不产生冲突,官方的 CSS 变量就改用两根连词线了
4. 变量名大小写敏感
5. 全局的变量放在:root中
6. js检测浏览器是否支持css变量
    const isSupported =  window.CSS && window.CSS.supports && window.CSS.supports('--foo', #eee);
    if (isSupported) {
        // 支持
    } else {
        // 不支持
    }
7. js操作css变量
    document.body.style.setProperty('--foo', '#7F583F'); // 设置变量
    document.body.style.getPropertyValue('--foo').trim(); // 读取变量
    document.body.style.removeProperty('--foo'); // 删除变量
8. calc(100vh - 20px) // 计算
----------------------------------------------------------------------------------------------
// 预处理器sass
1. $变量名: 100px; // 以$开头
2  width: $变量名; // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中
3. $变量名: 100px !default; // 会忽略上下文,如果有重名,其他会覆盖
4. $变量名: 'cj'; // 类型可以是字符串,可以用+号连接,也可以用#{$变量名},也可以用class名
5. 作用域和js的块级作用域一样
6. 在import时:
    使用了.css结尾的文件
    以'http://'开头的文件
    用url()
    有media queries样式
7. 都会当成正常的css文件不会进行编译
8. 如果要让其进行编译则:
    文件以下划线开头,如: _base.scss
    引入时不加下划线,如: import 'base'
9. import引入的位置会决定变量所在的位置,同名会覆盖
10. 类型
    $zoom: 2 // number
    $color: red/#eee // color
    $str: 'hello.png' // string
    $list: (100px, 2, 'string', 200px) // arr
    $map: '(top: 1px, left: 2px, bottom: 3px)' // obj, 没有单引号
11. 运算
    $num1 + $num2 // 加
    $num1 - $num2 // 减
    (10px * 8) // 乘
    (10px / 2) // 除
    mix($color1, $color2) // 通过mix取2个色值的混合色
    red($color) // 通过red取$color的红色值
    green($color) // 通过green取$color的绿色值
    blue($color) // 通过blue取$color蓝色值
    color: rgb(red($color), green($color), blue($color)) // rgb值
12. 模块
    @mixin 模块名{ // 通过@mixin定义
        font: {
            size: 20px;
            weight: 500;
        }
        color: red;
    }
    .div{
        @include 模块名 // 通过@include使用
    }
    // mixin可以嵌套,也可以带参
    @mixin 模块名(参数1, 参数2) {
        color: 参数1;
        width: 参数2；
    }
    @include 模块名(blue, 20px)
13. 继承 // @extend
    简单继承:
        .div1{ css }
        .div2{ @extend .div1; css }
    链式继承:
        .div3继承.dvi2,.div2继承.div1,则.div3会继承.div2和.div1的内容,有相同属性时看优先级
14. 嵌套 // 嵌套中的'&'表示父级
    .div1 {
        width: 200px;
        .div2 {
            width: 100px;
        }
    }
15. 条件控制
    $type: 'tim'
    @if $type == 'tony' { color: red; }
    @else if $type == 'tim' { color: green; }
    @else { color: yellow; }
16. 循环
    @for $i from 1 through 3 { // 包括3,渲染3个
        .item#{ i } {
            width: 1px * $i
        }
    }

    @for $i from 1 to 3 { // 不包括3,渲染2个
        .item#{ i } {
            width: 1px * $i
        }
    }

    @while $i > 0 {
        .item#{ $i } {
            width: 1px * $i
        }
        $i: $i - 1
    }

    $map: '(top: 1px, left: 2px)' // 没有单引号
    .div{
        @each $key, $value in $map {
            #{ $key }: #{ $value }
        }
    }
17. 内置函数
    number:
        percentage($num) // 转化百分比
        round($num) // 四舍五入
        ceil($num) // 向上取整
        floor($num) // 向下取整
        abs($num) // 绝对值
        min($num) // 最小值
        max($num) // 最大值
        random() // 随机数
    array:
        length($list) // 长度
        nth($list, 2) // 获取下标为2的一项,下标从1开始
        set-nth($list, 2, 'str') // 把下标2的元素替换成'str'
        join($list1, $list2) // 拼接数组
        append($list, '999') // 相当于js的push
        index($list, 'str') // 返回'str'对应的下标
    string:
        unquote($str) // 去除引号
        quote($str) // 增加引号
        str-length($str) // 获取长度
        str-insert($str, 'x', 2) // 在下标2的前面插入'x'
        str-index($str, 1) // 获取1在字符串的下标
        to-upper-case($str) // 转大写
        to-lower-case($str) // 转小写
    map:
        map-get($map, key) // 根据key值,返回value值
        map-merge($map1, $map2) // 合并成一个
        map-remove($map, key) // 删除对应key和value,返回新的map
        map-keys($map) // 返回map中所有的key
        map-values($map) // 返回map中所有的value
        map-has-key($map, key) // 判断是否含有key值,返回布尔值
        keywords($args) // 结合@mixin使用,获取所以参数,相当js的args
18. 自定义函数
    @function 函数名(参数) { @return }
    .div {
        width: 函数名(参数)
    }
19. 'mixin' 和 'function' 的区别
    1. 'mixin' 没有返回值，相当于是代码块
    2. 'function' 是经过计算返回的
20. 在 js 中使用 scss 变量：在 scss 中通过 :export 导出，在 js 中可以通过 ESM 进行导入
    $menuTextColor: red
    :export {
        menuTextColor: $menuTextColor
    }