CSS Mind Map

概念

辨析“规则”与“规则集”

规则是由属性和值组成的声明、声明与括号形成的声明块再加上选择器组成，而一条或多条规则组合成了规则集。

块级元素（Block-level elements）与内联元素（Inline-level elements）

类似 div、ul、p、h1 这些都是块级元素。一般来说，块级元素会生成一个默认填满父容器的内容区域。其后的兄弟元素将会被“换行显示”；内联元素会在一个文本行中生成元素框，它不会打断这行文本。内联元素常也译为“行内级元素”，在一些文章中，也被称为“行内元素”。

替换元素（Replaced elements）与非替换元素（Non-Replaced elements）

除了如 img、input、iframe 等元素，大多数元素都是非替换元素。替换元素的内容区域会被替换为其指向的外部对象。比如，如果 img 元素不带 src 属性的话，它不指向任何内容，在文档中没有意义，也就不是替换元素；如果 img 的 src 链接了外部图片，那么它的内容区域将被图片替换，此时就是替换元素。

内在盒子（Inner Display Type）与外在盒子（Outer Display Type）

内在盒子描述元素和其子元素的行为，外在盒子描述了元素与父元素以及兄弟元素间的行为。举个例子：

• display: block 的盒子由外在块级盒子和内在块级容器盒子组成
• display: inline-block 的盒子由外在内联盒子和内在块级容器盒子组成
• display: inline 的盒子由外在内联盒子和内在内联盒子组成

选择器

CSS 大小写敏感吗？

选择器大小写敏感，但 CSS 其它部分大小写并不敏感。所以 Display: NONE 和 display: none 是等价的。

伪类和伪元素用单冒号还是双冒号？

• 伪元素表示通过选取 DOM Tree 中不存在的元素。它是一种概念或范围，所以可以对伪元素样式修改，如首字母（::first-letter）。
• 伪类表示元素的一种状态，如激活状态（:active）。同一个元素，多个状态之间可以并存，如激活悬浮状态（:active:hover）。为什么 、:focus 等和用户操作相关的状态也是伪类呢？因为用户操作导致元素状态改变。

选择器的巧用

前阵子看一篇文章，有一位老哥用 选择器来处理文字逻辑的：

<dl>
  <dt>姓名：</dt>
  <dd>张三</dd>
  <dt>性别：</dt>
  <dd></dd>
  <dt>手机：</dt>
  <dd></dd>
  <dt>邮箱：</dt>
  <dd></dd>
</dl>
<style>
  dd:empty::before {
    content: '暂无';
    color: gray;
  }
</style>

这只能体现 CSS 的可能性，但在项目中运用则是一种错误的做法。比如，如果考虑项目后期要做国际化，那么写在 CSS 中这些内容的可维护性就非常差了。JS 处理逻辑，CSS 负责样式，关注点别搞混了。

通配符的优先级问题

通配符的优先级要比默认高，所以在 CSS Reset 的时候要注意。

哪些属性可以继承？

CSS 中的继承理念很符合直觉，大部分属性如边框、边距、填充等盒子的样式不能继承，而文字相关的如字体、颜色等属性就可以继承。

可继承的属性以下列出：

• 交互样式相关属性：visibility、cursor
• 文字排版相关属性：letter-spacing、word-spacing、white-space、line-height、color、font-*、text-*
• 列表排版相关属性：list-style、list-style-type、list-style-position、list-style-image
• 表格排版相关属性：border-collapse

text-decoration 可以继承吗？

text-* 开头的属性大都可以继承，然而 text-decoration-* 是个例外。在下面这个例子中，“子元素”看起来像是继承了来自父元素的 underline 属性。

<p style="text-decoration: underline;">
  父元素 |
  <span style="text-decoration: line-through;">
    子元素 text-decoration: line-through
  </span>
  | 父元素
</p>

父元素 | 子元素 text-decoration: line-through | 父元素

继承得到的属性优先级是多少？

继承得来的值优先级是 0，和通配符一样。很遗憾，其实并不是。

<h1>This is my heading.<span>asdf</span></h1>
<style>
  * {
    color: #bbb;
  }
  h1 {
    color: #333;
  }
</style>

听说过 LVHT 吗？

“LVHT”指的是我们写 CSS 时常使用的“a:link、a:visited、a:hover、a:active”顺序，主要是依靠级联的最后一条规则“声明出现在文档中的顺序越后，权重越大”。

一般来说，我们不会使用“a:active:hover、a:hover:link”等选择器。由于我们总是这四个状态的重要性依次递增，所以推荐“LVHT”顺序，也可以记为“Love&Hate”。

视觉格式化模型

视觉格式化模型，即“Visual Formatting Model”。一般 CSS 使用自上而下，从左至右的布局。盒子是其中的最基础的渲染单位，代表了元素的展现方式以及它们同周围元素的相互作用。渲染时，所有元素都会依据 VFM 来判定其大小，位置以及属性。VFM 决定了浏览器如何处理文档树，将元素转化为用户看到的内容。

• 盒子尺寸，受元素类型、box-sizing 影响
• 盒子类型，受 display、float 影响
• 定位方案，受 position 影响
• 子元素及兄弟元素
• Viewport 尺寸及位置
• 内在尺寸（如果是替换元素的话，需要考虑元素的内在尺寸，如图片宽度）

元素类型如何影响盒子类型？

每一个块级元素都会按照 VFM 生成至少一个主块级盒子（Principle Block-level Box）。说“至少”是因为一些块级元素能生成额外的盒子，如 li 会生成标记盒子（就是列表项前面的那个点点）。

除非一个块级盒子是表盒（Table Box）或替换元素的主盒，块级盒子也是一个块容器盒子（Block Container Box）。当一个盒子既是块级盒子，也是块容器盒子时，它也是块盒子（Block Box）。见下图左。

一般情况下，一个块容器盒子要么只包括块级盒子，要么只包含内联级盒子（行内级盒子）。

内联元素（Inline-level Elements）不会为内容形成新的块，它的内容只能以“行”的形式布局。每一个内联元素都会生成一个内联盒子，这个盒子要么是行内盒子（Inline Box），要么是原子内联盒子（Atomic Inline-level Box）。行内盒子及其内容会直接参与 IFC，而原子内联盒子以“单一不透明盒子”的形式参与 IFC。

box-sizing 如何影响盒子尺寸？

Box Sizing 用来标记盒子的内容区宽高的计算方式。《CSS 世界》提到：属性 Box Sizing 发明的初衷可能是用于解决替换元素的宽度自适应的问题。比如输入框的宽度默认情况下的 100% 往往会超过父容器。所以建议这样写样式重置：

input, textarea, img, video, object {
    box-sizing: border-box;
}

display 属性如何影响盒子的类型？

• display: block，生成一个主块盒子
• display: inline-block，生成一个主内联盒容器（自身按照块盒子进行格式化布局，内容则按照原子内联盒子布局）
• display: inline，生成一个或多个行内盒子
• display: none，自身及内容都会在布局时被移除，不会生成任何盒子
• display: content，会保留盒子、子元素以及其自身伪元素，只是浏览器不会渲染盒子的边界

position 与流的关系有几种？

CSS2.2 的定位方案就三种，普通流定位，浮动定位或是绝对定位。

• 普通流定位，按普通流的规则排列盒子，Position 属性的值为 static
• 浮动定位，脱离文档流（Out of Flow），Float 属性的值不为 none
• 绝对定位，脱离文档流，Position 属性的值为 static | fixed

在普通流中，盒子默认按从左至右、自上而下的规则排列；可以使用相关属性改变流的方向，下图是阿拉伯使用的搜索引擎主页，见 HTML 元素上定义的 DIR 属性：

BFC 该怎么理解和使用？

布局时，VFM 依据盒子的类型生成格式化上下文，有 BFC（Block Formatting Context） 或是 IFC 等。格式化上下文使盒子在界面上形成一个独立的，不影响外界的容器。

最直观的感受肯定是 HTML 元素，即根元素，它是浏览器中最重要的一个独立的不影响外界的容器。根元素会创建 BFC，在一些情况下，其它元素也会。这里有 MDN 的一份创建 BFC 方法的 清单：

• 根元素
• 浮动元素
• 绝对定位元素
• Overflow 不为 Visible 的块级元素
• CSS3 中新增了一种 display: flowRoot 可以用来创建无副作用的 BFC。
• 行内块元素，弹性元素，网格元素
• 表格单元格，表格标题

BFC 的副作用主要和浮动元素以及内部子元素相关：

• BFC 不会和外部浮动元素重叠。
• BFC 内部的相邻的块级盒子的垂直外边距会折叠。
• 计算 BFC 的高度时，内部浮动的盒子也会参与计算。

IFC 该怎么理解和使用？

如果一个块级盒内部只有行内盒子，那么会创建一个 IFC，块级盒子内部的盒子就会按照 IFC 的规则排列。在 IFC 中，需要注意：

• 内部的盒子一个接着一个地排列，起点是包含块的顶点。
• 如果一行放不下内容，那么会被“拆”开放到下一行。
• 只有水平方向上的 Margin 会在盒子中保留。
• Padding 和 Border 不会撑开行高。

浮动相关问题

• 父容器塌陷问题

浮动元素，尤其是浮动的图片，很适合用来进行图文混合排版。但是由于脱离了正常文档流，非 BFC 容器不会计算内部浮动元素的高度，所以会引起父容器塌陷的问题。

@font-face {
    font-family: 'Quote';
    unicode-range: U+201c, U+201d, U+300C, U+300D;
}

@font-face {
    font-family: 'Noto Serif CJK';
}

:root {
    --font-text: 'Quote', 'Noto Serif CJK';
}

article {
    font-family: var(--font-text);
}

.slide-enter-content {
  counter-reset: enter-count;
}
.slide-enter-content > p {
  --stagger: 0;
  --delay: 150ms;
  --start: 0ms;
  animation: slide-enter 1s both 1;
  animation-delay: calc(var(--start) + var(--stagger) * var(--delay));
}
.slide-enter-content > p {
  counter-increment: enter-count;
  --stagger: counter(enter-count);
}

// 设置变量
$elm.style.setProperty('--var', 'value')

.button {
  width: 80px;
  width: var(--button-default-width, 80px);
}

@button-default-width: 80px;
.setFallback(@property, @imp) {
  @{property}: e(replace(@imp, '@([^() ]+)', '@{$1}', 'ig'));
  @{property}: e(replace(@imp, '@([^() ]+)', 'var(--$1, @{$1})', 'ig'));
}
.button {
  .setFallback(width, '@button-default-width');
}

.box {
  /* --tog1 --tog2 --tog3 同时为空值时是 red */
  --red-if-and: var(--tog1) var(--tog2) var(--tog3) red;
}
.box {
  /* --tog1 --tog2 --tog3 任意为空值时是 red */ 
  --red-if-or: var(--tog1, var(--tog2, var(--tog3))) red;
}

@supports (background: paint(houdini)) {
  @property --stop {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 40%;
  }
}
.anim {
  /* fallback */
  --stop: 40%;
  background: linear-gradient(pink var(--stop), orange calc(var(--stop) + 20%));
}

@property --num {
  syntax: "<integer>";
  initial-value: 2541;
  inherits: false;
}
.css-variable-transition {
  padding: 2em;
  counter-set: num var(--num);
  border: solid 1px;
  font-size: 2em;
  font-weight: bold;
  transition: --num .3s;
  cursor: pointer;

  &:hover {
    --num: 17049;
    &::after {
      content: counter(num, lower-alpha) "!";
    }
  }
  &::after {
    content: counter(num, lower-alpha);
  }
}

<meta name="viewport" content="
  width=device-width,
  user-scalable=no,
  initial-scale=1.0,
  maximum-scale=1.0,
  minimum-scale=1.0">

@media only screen and (min-device-pixel-ratio: 1.5) {
  /* ... */
}

#component[data-dpr="2"] {
  /* ... */
}

#component[data-dpr="2"] {
  position: relative;
}
#component[data-dpr="2"]::after {
  position:absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  content:"";
  transform: scale(0.5);
  transform-origin: left top;
  box-sizing: border-box;
  border: 1px solid #333;
}

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">