试整理：CSS中的语法与概念_html/css_WEB-ITnose

发端自此。也正在筹备一个关于“CSS布局怎么算”的一个presentation，算是预热之一。当然我懒得写例子，就各种好了=w=

语法

本段分类方式部分参考了https://en.wikipedia.org/wiki/Comparisonoflayoutengines(CascadingStyleSheets)

选择器

元素

*, E, .class, #id, ns|E

关系

E F, E>F, E+F, E~F, E /for/ F

属性

[attr], [=], [~=], [|=], [~=], [$=], [*=]

伪类

• 链接

:link, :visited, :active, :hover, :focus

• 结构化伪类

:root, :first-*, :last-*, :only-*, nth-*

• 表单（未列举完全）

:empty, :target, :disabled, :checked, :invalid, :required

• :not(), :lang()

伪元素

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

属性

排版

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

• 模式

display

• 定位

position, top, left, right, bottom, z-index

• 盒模型

border-\, padding-\, margin-\ ,box-sizing, \-width, \*-height

• 特定模式

浮动

float, clear

列表

list-style-\*

表格

border-collapse, border-spacing, caption-side, empty-cells, table-layout

• 视觉效果

overflow, clip-\*, visibility

排印

字体排印是非常大一块，只是没有提出多少新概念，因此在这里仅整理属性。
对排印的模式及其解析请期待《字体排印在前端》（跳票太长时间，被PIA飞……

• 字体匹配

font-\*

• 断句

white-space, line-break, hypens, word-wrap

• 书写方向

direction, unicode-bidi, writing-mode

• 其它排印内容

text-\*

效果

这一段没有什么好说，由于效果直观，大家可在互联网上见到极多的示例。

• 颜色与背景

color, opacity, background-\, \-shadow

• 变形与动画

transform-\, perspective-\, backface-visibility

• 动画

transition-\, animation-\

• 用户界面

cursor, outline

值

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

距离

http://css-tricks.com/the-lengths-of-css/

• 绝对

cm, mm, in, pt, pc, px

• 相对

相对字体em, rem, ex, ch
相对视口vw, vh, vmin, vmax

颜色

张鑫旭《CSS1-CSS3 颜色知识知多少？》
还有鑫大大没有涉猎到的地方吗……

• 关键词

颜色如 red
系统颜色如 ButtonText
currentColor

• 纯色色值

RGB, #RRGGBB, rgb(), hsl()

• 透明色值

rgba(), hsla(), transparent

时间

ms, s

频次

Hz, kHz

角度

deg, grad, rad, turn

以上介绍均可见：张鑫旭《CSS/CSS3长度、时间、频率、角度单位大全》

分辨率

dpi, dpcm, dppx

数字

• Integer：1
• Number：1.1
• Percentage：%

url

string

functional notation

• calc()
• toggle()
• attr()

@规则

张鑫旭《博闻强识：了解CSS中的@ AT规则》

• @keyframes
• @font-face
• @media
• @charset
• @import
• @namespace
• @document
• @page
• @supports

/\Comment\/

概念

计算

选择器（权重）

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

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

user agent declarations

author normal declarations

user normal declarations

author important declarations

user important declarations

同级别，计算特化程度（specificity）

tag

class

id

inline style

user agent为浏览器默认UA；
author即CSS中的声明；
user即style=。
!important可提升author / user层面的权重。

计算阶段的各个值

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

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

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

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

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

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

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

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

line-height的相应计算

真实值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

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影响布局的方式：

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

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

line-box的高度是垂直对齐排列最上面inline-box的顶边和最下边inline-box的底边距离；

如果inline-box字号设置大于行内框的 'line-height' 设置，文字将溢出当前line-box，他可能造成多行时文字相互覆盖；

在没有其他块级内容的情况下，整个block-box的高度取决于多个line-box累计的高度

每个计算出的行框在垂直高度上排列没有间隙

Table

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

Flex

上下文

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

• BFC：Block Formatting Context

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

• IFC：Inline Formatting Context

规则脱胎自文字排印，核心概念是vertical-align、line-height。

层叠上下文Stacking Context

决定元素在定位上有重合时的相互覆盖情况。
CSS2.1时期的规则可参考W3Help《分层的显示( Layered presentation )》
进入CSS3以后，Stacking Context不仅仅由z-index创建，而这导致了它的复杂性。可参考@KevinYue 的一个回答。（这么棒的回答没人赞吗

Viewport

• Visible Viewport
• Layout Viewport

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

视口相关，还有一个平常比较难发现的扩散行为，参见我在这里的探究。

Containing block

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

Containing block

• of root
• of fixed
• of static/relative
• of non-static inline
• of non-static block

Replaced Element

替换元素，即内容区块超出CSS格式化模型的元素，定义见W3C《第三章：定义》。在W3C的第十章有专门针对替换元素的定位进行阐述。

它们大多有一些固有宽/高/比例；
浏览器或多或少支持了一些影响内部内容渲染的CSS属性（如padding、line-height等），让它们少桀骜难训了那么一点点。但这种支持并没有定义在CSS标准中，因此有各个UA之间的差异。