试整理：CSS中的语法与概念_html/css_WEB-ITnose-html教程-PHP中文网

发端自此。也正在筹备一个关于“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

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 的一个回答。（这么棒的回答没人赞吗