试整理：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之间的差异。

查看更多关于试整理：CSS中的语法与概念_html/css_WEB-ITnose的详细内容...