CSS中的语法与概念

发端自此。本文细节从略，只做主干梳理。

这个树主要还是在借CSS2.1标准的骨架，填充进一些新的CSS3标准。要不然CSS3各个module一填进去，这个树就过于庞大了。

语法

本段分类方式部分参考了wiki《Comparison of Layout Engines》。

属性

语法层面仅对属性作粗略分类。重点还是概念（display, position, float均决定了布局基础模式）。

值

本段整理自标准http://www.w3.org/TR/css3-values

概念

规则匹配

根据来源和重要程度，这样排序：

1. user agent declarations

2. user normal declarations

3. author normal declarations

4. author important declarations

5. user important declarations

p.s. User Agent、User和Author即三个不一样的样式声明来源：浏览器、用户和（页面）作者

同级别比较才会再计算特化程度（specificity）。

1. tag

2. class

3. id

4. inline style

计算

计算阶段的各个值:

1. 指定值Specified values：在样式表中指定的值

   • 将确定一个属性使用的是声明值、继承值还是初始值

2. 计算值Computed values：格式化文档之前，根据样式表计算出的值

   • 相对的URI将转化为绝对URI

   • float: left将导致计算值为display:block也发生在这一步

   • 相对单位em将转化为px或类似单位（当然，如果font-size中用到了em，则需要到下一步才能算出）

3. 使用值Used values：格式化文档之后，根据样式表及层叠关系计算出的值

   • 百分比值转化为px或类似单位

   • line-height的相应计算

4. 真实值Actual values：使用值在一些UA中可能不允许被使用，因此还可能发生针对UA的转化

   • 比如在chrome里面，px不允许有小数，因此就算使用值是33.333px，真实值将是33px。这可能导致一些subpixel bug

   • 比如在kindle的浏览器里面，UA本身不支持灰度以外的颜色，因此所有的颜色将会转化会灰色

布局

块

盒模型 Box model

对应CSS2.1第8章 Box model，十分基础，介绍的文章很少出问题，就不多说了。

这几个概念将在“包含块”里面再次提到：

• Margin Edge

• Border Edge

• Padding Edge

• Content Edge

参考：包含块 Containing block

不理解“包含块”的概念，永远无法完全理解width:100%、width:auto、top: 0;等究竟是相对何而言的。参考W3Help《包含块( Containing block )》：

参考：替换元素与非替换元素 Replaced Element & Non-replaced Element

替换元素，定义见W3C《第三章：定义》。在W3C的第十章有专门针对替换元素的定位进行阐述。

• 内容区块超出CSS格式化模型

• 大多有一些固有宽/高/比例

视口 Viewport

参见quirksmode的《两个视口的故事【1】、【2】》。

• Visible Viewport

• Layout Viewport

布局体系 Positioning

布局体系，决定元素出现在哪里及相互影响的方式。

常规布局

CSS2.1的重心与难点。
本部分网络非常多谬误，很容易被各路水货带进坑。
最好参照W3Help《CSS 定位体系概述》和后面几章，对应标准CSS2.1《第9章 Visual formatting model》，《第10章 Visual formatting model details》来理解。

常规布局又分为三大块：

• Normal Flow
  出现inline-box、line-box、block-box的概念，同时又提出了BFC和IFC。

• Float

• Absolute positioning

普通流的高度计算流程，可一窥各个box影响布局的方式：

1. 根据 'line-height' 属性计算出每个行内元素的inline-box高度；

2. 根据 'vertical-align' 属性计算出每个inline-box的垂直对齐方式；

3. line-box的高度是垂直对齐排列最上面inline-box的顶边和最下边inline-box的底边距离；
   如果inline-box字号设置大于行内框的 'line-height' 设置，文字将溢出当前line-box，他可能造成多行时文字相互覆盖；

4. 在没有其他块级内容的情况下，整个block-box的高度取决于多个line-box累计的高度
   每个计算出的行框在垂直高度上排列没有间隙

表格布局

表格布局很复杂，对外部的影响可属于Normal Flow，内部又区别于Normal Flow元素相互影响的方式。对应标准CSS2.1《第17章 Tables》

Flex布局

上下文

格式化上下文 Formatting Context

在常规流中的框，都属于一个格式化的上下文中：

• IFC：Inline Formatting Context
  规则脱胎自文字排印，核心概念是vertical-align、line-height。

• BFC：Block Formatting Context
  这个概念的细则可见Smallni的《hasLayout && Block Formatting Contexts》

层叠上下文 Stacking Context

决定元素有重合时的相互覆盖情况。
CSS2.1时期的规则可参考W3Help《分层的显示( Layered presentation )》
进入CSS3以后，Stacking Context不仅仅由z-index创建，而这导致了它的复杂性。可参考MDN《The stacking context》。