HTML/CSS/Javascript 查漏补缺

CSS 部分

https://developer.mozilla.org/zh-CN/docs/Web/CSS

* 基础

1. 选择器

• 属性选择器：
  • [title]
  • [title="hello"]
  • [title~="hell0"]
  • [title^="hello"]
  • [title$="hello"]
• 伪类选择器：:first-child
• 伪元素选择器：::before、::first-letter、::first-line
• 关系选择器：
  • 后代选择器： ；空格
  • 相邻后代选择器：>
  • 兄弟选择器：~；选择当前元素后面的所有符合规则的兄弟元素。>IE7
  • 相邻兄弟选择器： +；仅选择紧跟在当前元素后面的合乎规则的兄弟元素。 >IE7

2. @规则

@media、@font-face、@page、@support

3. css 渲染机制

css渲染机制是建立在基础盒子模型之上的，图文样式、布局都可以抽象为对各个盒子的渲染排布。CSS 渲染的内容是HTML元素

4. 块级元素 vs 行内级元素

CSS 渲染的内容是HTML元素，分为块级元素和行内级元素。

行内即内联，本文将 inline 翻译为 行内

• 块级元素：元素的 display 为 block、list-item、table 时，该元素将成为块级元素。

  一个块级元素会被格式化成一个 块，默认按照垂直方向依次排列。

  这就是为什么块级元素表现为一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

• 行内级元素：display 为 inline、inline-block、inline-table 的元素称为行内级元素。

  一个行内级元素不会被格式化成一个 块。

5. 基础盒模型

渲染引擎根据 CSS 基础盒模型将 元素 表示为一个个矩形盒子

每个盒子由四个部分（区域）组成：内容区域 、内边距区域 、边框区域、 外边距区域。

6. 视觉格式化模型（visual formatting model）

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model

视觉格式化模型会根据 基础盒模型 将文档中的元素转换为一个个盒子，该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。

块：block，一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向上按照顺序依次堆叠。

包含块：containing block，包含其他盒子的块称为包含块。

7. 盒子 抽象的概念 CSS引擎创建 、元素定位 、布局 、视觉格式化

盒子与元素并不是一一对应的，有时多个元素会合并生成一个盒子，有时一个元素会生成多个盒子（如匿名盒子）。

盒子有多种类型：

• 块级盒子： block-level box

  由块级元素生成。一个块级元素至少会生成一个块级盒子（主块级盒子 principal block-level box），但也有可能生成多个（例如列表项元素，会生成额外的盒子来放置项目符号，学名“标记盒子” marker box）。

  • 每个块级盒子都会参与 块格式化上下文 的创建
  • 主块级盒子包含由后代元素生成的盒子以及内容，同时它也会参与定位方案。

• 块容器盒子：block container box 或 block containing box

  要么只包含其它块级盒子，要么只包含行内盒子并同时创建一个行内格式化上下文（inline formatting context）。

  为什么要再弄个 块容器盒子 出来呢：

  这里搬出张鑫旭大佬的解释： 张鑫旭大佬在《CSS世界》中提到：每个元素都有两个盒子：容器盒子+外在盒子

  外在盒子：确定元素是可以一行显示还是只能换行显示

  容器盒子：负责元素宽高、内容呈现等

• display:block; 块级盒子+块级盒子
• display:inline-block; 内联盒子+块级盒子

• display:table; 块级盒子+表格盒子

• 块盒子：block box，如果一个块级盒子同时也是一个块容器盒子，则称其为块盒子。

• 匿名块盒子：Anonymous block box 块包含盒子可能只包含行内级盒子，也可能只包含块级盒子，但通常的文档都会同时包含两者，在这种情况下，就会在相邻的行内级盒子外创建匿名块盒子。

  另一种会创建匿名块盒子的情况是一个行内盒子中包含一或多个块盒子。此时，包含块盒子的盒子会拆分为两个行内盒子，分别位于块盒子的前面和后面。块盒子前面的所有行内盒子会被一个匿名块盒子包裹，块盒子后面的行内盒子也是一样。因此，块盒子将成为这两个匿名块盒子的兄弟盒子。如果有多个块盒子，而它们中间又没有行内元素，则会在这些盒子的前面和后面创建两个匿名块盒子。

  CSS选择器不能作用于匿名盒子(anonymous boxes)，所以它不能被样式表赋予样式。也就是说，此时所有可继承的 CSS 属性值都为 inherit ，而所有不可继承的 CSS 属性值都为 initial。

块容器盒子侧重于当前盒子作为“容器”的这一角色，它不参与当前块的布局和定位，它所描述的仅仅是当前盒子与其后代之间的关系。换句话说，块容器盒子主要用于确定其子元素的定位、布局等。有些块级盒子并不是块容器盒子，比如表格；而有些块容器盒子也不是块级盒子，比如非替换行内块和非替换表格单元格。

我个人目前的理解是张鑫旭大佬可能只是为了通俗解释，实际情况是只生成了 块级盒子或者块容器盒子或块盒子，用哪种盒子主要看是否作为容器角色和是否参与布局定位。

但感觉还是有些问题（主要疑惑是：块盒子、块容器盒子是和块级盒子同级的概念还是块级盒子的特例，一个元素是不是会同时生成这些盒子），有空抠一下规范：

• 行内级盒子：inline-level box

  如果行内级元素生成的盒子参与行内格式化上下文的创建，则该盒子为一个行内级盒子。

• 行内盒子：inline box

  如果一个行内级盒子的内容不参与行内格式化上下文的创建，则称其为行内盒子。与块盒子类似，行内盒子也分为具名行内盒子和匿名行内盒子（anonymous inline box）两种。

  比如所有具有 display:inline 样式的非替换盒子，可以被拆分为多个盒子。

• 原子行内级盒子：atomic inline-level box，不参与行内格式化上下文创建的行内级盒子。原子行内级盒子的内容不会拆分成多行显示。

• 匿名行内盒子

  一种常见的情况是CSS引擎会自动为直接包含在块盒子中的文本创建一个行内格式化上下文，在这种情况下，这些文本会被一个足够大的匿名行内盒子所包含。但是如果仅包含空格则有可能不会生成匿名行内盒子，因为空格有可能会由于 white-space 的设置而被移除，从而导致最终的实际内容为空。

• 行盒子

  行盒子由行内格式化上下文创建，用来显示一行文本。在块盒子内部，行盒子总是占据整个块盒子的宽度。当有浮动元素时，行盒子会从向左浮动的元素的右边缘延伸到向右浮动的元素的左边缘。

  Each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a “strut”.

* 块格式化上下文（Block Formatting Context，BFC）

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

块格式化上下文包含创建它的元素内部的所有内容.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

* box-sizing

box-sizing: >=IE8，指定 width/height 作用于哪个区域

box-sizing 默认为 content-box，内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。

支持情况：

.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* Firefox曾经支持*/
.box3 { box-sizing: border-box; } /* 全线支持 */
.box4 { box-sizing: margin-box; } /* 从未支持过 */

* 确定包含块

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

• 如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。

• 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成。

• 如果 position 属性是 fixed，包含块就是由 viewport (in the case of continuous media) 或是组成的。

• 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
• A transform or perspective value other than none *A will-change value of transform or perspective A filter value other than none or a will-change value of filter (only works on Firefox).

* float

在浮动定位中，浮动盒子会浮动到当前行的开始或尾部位置。这会导致普通流中的文本及其他内容会“流”到浮动盒子的边缘处，除非元素(块级元素)通过 clear 清除了前面的浮动。

一个盒子的 float 值不为 none，并且其 position 为 static 或 relative 时，该盒子为浮动定位。如果将 float 设置为 left，浮动盒子会定位到当前行盒子的开始位置（左侧），如果设置为 right，浮动盒子会定位到当前行盒子的尾部位置（右侧）。不管是左浮动还是右浮动，行盒子都会伸缩以适应浮动盒子的大小。

清除浮动

.clear::after {
  content: ' ';
  display: table | block | list-item; 只要是 块级元素 即可
  list-style: none;  针对 list-item，IE <=11不支持
  clear: both;
}

* height 百分比值

百分比高度值要想起作用：

• 其父级必须有一个可以生效的高度值（百分比相对包含块的 内容区域）
• 使用绝对定位（百分比相对包含块，而且是相对 内边距区域）

  包含块：见下一节 确定包含块