CSS 进阶内容

[coconilu]

1. 3D相关

1. 层叠上下文
2. perspective

2. 动画

设置帧：@Keyframes {animation-name}
设置动画参数：animation: animation-name duration timing-function delay iteration-count direction fill-mode;

iteration-count：循环次数，默认为1

infinite：无限循环
<number>：设置次数

direction：指示动画是否反向播放

normal：每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性
alternate：动画交替反向运行，反向运行时，动画按步后退
reverse：反向运行动画，每周期结束动画由尾到头运行
alternate-reverse：反向交替， 反向开始交替

fill-mode：指定在动画执行之前和之后如何给动画的目标应用样式。

none：动画执行前后不改变任何样式
forwards：目标保持动画最后一帧的样式
backwards：动画采用相应第一帧的样式
both：动画将会执行 forwards 和 backwards 执行的动作。

fill-mode演示

3. 变形（transform）

transform仅对块元素有影响，如display为block、inline-block等

transition：<property> <duration> <timing-function> <delay>;

4. 高级图像

1. canvas
2. svg

5. CSS 盒子对齐方式

块元素

1. 借助margin: auto达到居中对齐的效果
2. 父元素设置position为非static，子元素设置为absolute进行对齐（margin+top、left，translate）
3. 绝对定位可以在水平方向上设置left: 0;right: 0;margin: auto;达到水平居中效果；垂直方向同理
4. display: table-cell; vertical-align: middle;

行内元素

1. 父元素可以设置text-align达到水平对齐效果
2. 子元素可以设置vertical-align达到垂直对齐效果

6. 开启硬件加速的方式

那我们怎样才可以切换到GPU模式呢，很多浏览器提供了某些触发的CSS规则。比较常见的方式是，我们可以通过3d变化（translate3d属性）来开启硬件加速。

7. 浮动元素的特性

由于float意味着使用块布局，所以它会修改元素的display值（block）。

浮动的本意：

让文字像流水一样环绕浮动元素。

特性：

1. 包裹性
2. 高度欺骗

规则：

1. 不会超越前面的块元素，仅在本行浮动
2. 脱离文档流后，下分的块元素会填充
3. 两个浮动元素的垂直外边距将不会折叠
4. 浮动后的元素不会影响其他块元素的布局，仅会影响被它覆盖的行内元素
5. 浮动盒子的顶部不会超出在html文档中早出现的的块级元素(block)或者是浮动元素的顶部

可以从浮动元素的容器、兄弟块元素、兄弟行内元素角度看问题

clear

指定一个元素是否可以在它之前的浮动元素旁边，或者必须向下移动(清除浮动) 到这些浮动元素的下面。

这个规则只能影响使用清除的元素本身，不能影响其他元素。

容器解决高度塌陷的标准写法：

.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

8. 导致回流、重绘的操作

回流（reflow）是需要消耗大量cpu或gpu资源的，重绘（repaint）相对而言会少一些。

回流：

1. 调整浏览器窗口大小
2. 改变字体型号
3. 访问引擎浏览器flush队列的属性（如offsetTop等）
4. 其他引起浏览器重新计算所有节点位置大小的操作

重绘：

1. fixed元素在滚动条滚动的时候
2. 仅改变背景样式

9. 减少回流、重绘的方案

1. 在动画里，使用transform的translate代替left、top等操作

原因是在重绘操作中：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers，
而transform是位于Composite Layers层，而width、left、margin等则是位于Layout层

2. 在需要添加大量DOM的场景可以借助DocumentFragment对象；也可以先cloneNode，操作完成后对父元素进行replaceChild操作
3. 如果需要大量复杂的DOM操作，可以先display: none，操作完成后还原display
4. 不要经常访问会引起浏览器flush队列的属性（如下），如果你确实要访问，就先读取到变量中进行缓存，以后用的时候直接读取变量就可以了

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、
scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

5. 添加移动动画时，尽量把元素设置为position: absolute，绝对定位仅会引起重绘，不会引起回流
6. 千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局

10. CSS 命名规范

使用连字符分隔字符串
BEM：
    B：用一个连字符连接单词表示一个独立的区块
    E：两个下划线表示子组件
    M：两个连字符表示修饰符
JS-类名：表示使用在js代码里，请谨慎修改

11. 超链接的伪类样式顺序

为了正确渲染超链接的样式，一般它的伪类元素排序（LVHA）应该如下：

a:link{} /* 未访问链接 */ 
a:visited{} /* 已访问链接 */ 
a:hover{} /* 用户鼠标悬停，当鼠标悬浮在链接上面。 */ 
a:active{} /* 激活链接，鼠标按下和松开链接期间。 */ 

12. 对齐方式

水平居中

行内元素：容器使用text-align: center;
块元素：元素本身使用margin: auto;，绝对定位本身使用left: 50%; margin-left: -width/2或者left: 50%; transform: translateX(-50%)或者left: 0;right: 0; margin: auto

垂直居中

行内元素：容器使用line-height: height;
块元素：元素本身使用margin: auto;，绝对定位本身使用top: 50%; margin-top: -height/2或者top: 50%; transform: translateY(-50%)或者top: 0;bottom: 0; margin: auto

使用flex box布局

容器使用：

display: flex;
flex-direction: row;
justify-content: center;
align-items: middle;

13. 百分比

margin-(left、right、top、bottom)的百分比：相对于其最近的父级容器的宽度。

width、height：相对于其最近的父级容器的宽度。

left、right、top、bottom的百分比：代表元素包含块的宽度的百分比 。

transform: translate()的百分比：相对于自身的宽高。

14. 隐藏滚动条

两个方法：

1. 伪元素::-webkit-scrollbar

.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

2. 借助父元素的overflow: hidden，一般滚动条的长度为17px

15. 混合模式

1. mix-blend-mode

mix-blend-mode: normal;          //正常
mix-blend-mode: multiply;        //正片叠底
mix-blend-mode: screen;          //滤色
mix-blend-mode: overlay;         //叠加
mix-blend-mode: darken;          //变暗
mix-blend-mode: lighten;         //变亮
mix-blend-mode: color-dodge;     //颜色减淡
mix-blend-mode: color-burn;      //颜色加深
mix-blend-mode: hard-light;      //强光
mix-blend-mode: soft-light;      //柔光
mix-blend-mode: difference;      //差值
mix-blend-mode: exclusion;       //排除
mix-blend-mode: hue;             //色相
mix-blend-mode: saturation;      //饱和度
mix-blend-mode: color;           //颜色
mix-blend-mode: luminosity;      //亮度

mix-blend-mode: initial;         //初始
mix-blend-mode: inherit;         //继承
mix-blend-mode: unset;           //复原

2. background-blend-mode

只能是background属性中的背景图片和颜色混合，而且只能在一个background属性中。

3. isolation

该属性的主要作用是当和background-blend-mode属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。

16. CSS匹配方式和优化方案

事实上，CSS 选择符是从右到左进行匹配的。

1. 避免使用通配符，只对需要用到的元素进行选择
2. 少用标签选择器
3. 不要画蛇添足，id 和 class 选择器不应该被多余的标签选择器拖后腿
4. 减少嵌套。后代选择器的开销是最高的，因此我们应该尽量将选择器的深度降到最低（最高不要超过三层），尽可能使用类来关联每一个标签元素。

17. JS操作样式的途径

1. 通过style

element.style.height

2. 通过设置attribute

element.setAttribute(key, value)
element.setAttribute("style", "key: value")

3. 通过class

element.className += ""

4. 通过cssText

element.style.cssText += "key: value"

5. 通过JS插入新的style节点

6. 通过JS操作document对象的styleSheets

document.styleSheets[0].addRule("css_name", "key: value")
document.styleSheets[0].insertRule("css_name", "key: value")

参考：

浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
CSS Box Alignment
JavaScript——浏览器的重绘与回流
如何减少回流、重绘
[译]这些 CSS 命名规范将省下你大把调试时间
Float元素的9条特性
CSS浮动float详解
Compositing and Blending
mix-blend-mode
CSS3混合模式mix-blend-mode/background-blend-mode简介