CSS

[mileOfSunshine]

6 CSS Properties Nobody Is Talking About

1. all
2. writing-mode
3. background-clip
4. user-select
5. white-space
6. border-image property

[mileOfSunshine]

推荐： https://cssbattle.dev/

记录 battle 例子

[mileOfSunshine]

优先级的计算规则

CSS选择器的优先级关系：

内联 > ID选择器 > 类选择器 > 标签选择器

浏览器具体的优先级算法（from 《CSS REFACTORING》）：

优先级值由 A B C D 的值来决定，他们值的计算规则为： 1、如果存在内联样式，那么 A = 1，否则 A = 0 2、B 的值等于 ID选择器（#id） 出现的次数 3、C 的值等于 类选择器（.class） 和 属性选择器（a[target]） 和 伪类（::before、::after） 出现的总次数 4、D 的值等于 标签选择器（span、div） 和 伪元素（:active、:first-child） 出现的总次数

示例：

li                                  /* (0, 0, 0, 1) */
ul li                               /* (0, 0, 0, 2) */
ul ol+li                            /* (0, 0, 0, 3) */
ul ol+li                            /* (0, 0, 0, 3) */
h1 + *[REL=up]                      /* (0, 0, 1, 1) */
ul ol li.red                        /* (0, 0, 1, 3) */
li.red.level                        /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11  /* (0, 0, 11,0) */
#x34y                               /* (0, 1, 0, 0) */
li:first-child h2 .title            /* (0, 0, 2, 2) */
#nav .selected > a:hover            /* (0, 1, 2, 1) */
html body #nav .selected > a:hover  /* (0, 1, 2, 3) */

比较规则：从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的覆盖前面的。

详见【深入理解CSS选择器优先级】

扩展：

所有伪元素：

::after
::before
::first-letter
::first-line
::selection

伪类：

:active
:first-child
。。。

[mileOfSunshine]

重排 & 重绘

概念

重排：浏览器需要重新计算元素在视口内的几何属性。 重绘：根据节点样式和几何信息，将渲染树上的每个节点转换成屏幕上的实际像素。

如何减少重排和重绘？

1、最小化，如样式集中改变，设置新样式类名 2、批量操作DOM，如将元素属性存储于临时变量，利用 DocumentFragment 集中操作DOM 3、脱离文档流（fixed or absolute） 4、开启GPU加速，利用css属性 transform 、will-change 为元素创建GPU图层，独立于图层渲染

[mileOfSunshine]

盒模型

• IE（怪异）盒模型（width = content + padding + border）
• 标准盒模型（width = content）

可利用 box-sizing （= content-box）（= border-box）属性可进行转换。

[mileOfSunshine]

flex-grow 与 flex-shrink

如果所有元素的flex-grow/shrink之和大于等于1，则所有子元素的尺寸会被调整到适应父元素的尺寸（在不考虑(max-/min-)width/height的前提下）， 而如果所有元素flex-grow/shrink之和小于1，则只会grow/shrink所有元素flex-grow/shrink之和相对于1的比例。 grow时的每个元素的权重即为元素的flex-grow的值，shrink时的每个元素的权重则为元素flex-shrink乘以width后的值。公式：

• 所有子项收缩系数之和（>=1） 溢出宽度 = 父容器宽度 - ∑(子项宽度)

• 所有子项收缩系数之和（<1） 溢出宽度 = (父容器宽度 - ∑(子项宽度)) * (∑(子项收缩系数)) / 1

子项的收缩宽度 = 子项收缩比例 * 溢出宽度

子项的收缩比例 = (子项宽度 * 子项收缩系数) / ∑(子项宽度 * 子项收缩系数)