摘要：属性语法层面仅对属性作粗略分类。重点还是概念均决定了布局基础模式。常规布局的重心与难点。对应标准第章布局上下文格式化上下文在常规流中的框，都属于一个格式化的上下文中规则脱胎自文字排印，核心概念是。
发端自此。本文细节从略，只做主干梳理。
这个树主要还是在借CSS2.1标准的骨架，填充进一些新的CSS3标准。要不然CSS3各个module一填进去，这个树就过于庞大了。
语法本段分类方式部分参考了wiki《Comparison of Layout Engines》。
属性语法层面仅对属性作粗略分类。重点还是概念（display, position, float均决定了布局基础模式）。
值本段整理自标准http://www.w3.org/TR/css3-values
概念 规则匹配根据来源和重要程度，这样排序：
user agent declarations
user normal declarations
author normal declarations
author important declarations
user important declarations
p.s. User Agent、User和Author即三个不一样的样式声明来源：浏览器、用户和（页面）作者
同级别比较才会再计算特化程度（specificity）。
tag
class
id
inline style
计算计算阶段的各个值:
指定值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
参考：包含块 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影响布局的方式：
根据 "line-height" 属性计算出每个行内元素的inline-box高度；
根据 "vertical-align" 属性计算出每个inline-box的垂直对齐方式；
line-box的高度是垂直对齐排列最上面inline-box的顶边和最下边inline-box的底边距离；
如果inline-box字号设置大于行内框的 "line-height" 设置，文字将溢出当前line-box，他可能造成多行时文字相互覆盖；
在没有其他块级内容的情况下，整个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》
决定元素有重合时的相互覆盖情况。
CSS2.1时期的规则可参考W3Help《分层的显示( Layered presentation )》
进入CSS3以后，Stacking Context不仅仅由z-index创建，而这导致了它的复杂性。可参考MDN《The stacking context》。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111091.html
摘要：文件的编码格式页面的编码格式设置当前页面的编码格式在浏览器运行当前页面时，告诉浏览器当前的编码格式字符集概念存放所使用的所有的字符汉字分类美国欧洲中国万国码主要使用计算机的存储方式利用二进制方式和中国存储将 文件的编码格式 - UTF-8 HTML页面的编码格式 - UTF-8 设置当前HTML页面的编码格式 在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式 字符...
摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。 这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...
摘要：而使用预处理器，提供缺失的样式层复用机制减少冗余代码，提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，预处理器有没有解决更大的麻烦。也是成熟的预处理器之一，而且有一个稳定，强大的团队在维护。 这篇文章主要解答以下几个问题，供前端开发者的新手参考。 1、什么是Sass和Less？ 2、为什么要使用CSS预处理器？ 3、Sass和Less的...
阅读 1825·2021-11-24 09:39
阅读 2031·2021-09-22 15:50
阅读 1691·2021-09-22 14:57
阅读 664·2021-07-28 00:13
阅读 1008·2019-08-30 15:54
阅读 2329·2019-08-30 15:52
阅读 2574·2019-08-30 13:07
阅读 3727·2019-08-30 11:27
