CSS中的语法与概念

Humphry

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

图片描述

这个树主要还是在借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:autotop: 0;等究竟是相对何而言的。参考W3Help《包含块( Containing block )》:

CB4.png

参考:替换元素与非替换元素 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-boxline-boxblock-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-alignline-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》。

阅读 3.3k

整理强迫症患者的一生
本博客也会同步到:[链接]不来star一下吗

阿里妈妈招前端,有兴趣请 email 联系~

16.3k 声望
1.3k 粉丝
0 条评论

阿里妈妈招前端,有兴趣请 email 联系~

16.3k 声望
1.3k 粉丝
宣传栏