WebKit 网页布局实现 (0)：基本概念及标准篇
作为一个广受好评的浏览器引擎，其网页布局的质量(包括速度、效率、符合标准度等)往往是其关键，那么 WebKit 究竟是如何布局网页上的所有元素(包括滚动条、文字、图片、按钮、下拉框等)呢？其主要数据结构及流程都包括哪些呢？其布局的基本概念及标准都有哪些呢？下面分别介绍 WebKit 对其实现及运用。我们首先从关于布局的基本概念及标准的认识开始。
CSS 布局相关标准介绍
其实我们对要素的布局都有不同程度的了解如我们使用 Office 时经常使用对一段文字的居中、靠左等操作，复杂一点有设置编号及文字与图片的环绕对应关系等，其实布局的关键在于确定页面元素的显示位置及大小，而页面中主要包括有文字、图片、按钮等页面元素，为了有效的组织布局这些页面元素，一些专家学者经过多年的摸索，总结并设计了布局这些元素所涉及的一些规则及标准，这就是 CSS 标准。
这里安利一下：
Visual formatting model details对其主要规则进行过具体描述，通过下面相关总结和汇总希望能对其主要要点有一定的认识与理解。
要在一块指定的画布(或窗口)上布局一些要素，往往需要按从上到下或从左到右(或从右到左)的规则来布局这些元素，而有些元素则可以包含其他元素，当作布局容器来使用。其中浏览网页的原生窗口就可看作一个布局容器的根。
布局页面的基本概念
由于页面内容的大小可能超过原生窗口提供的显示区域的大小，CSS 中称页面上当前显示出来的区域为 ViewPort，这个 ViewPort 相对页面的原始位置可通过滚动条来调整；CSS 标准中定义了 html 中的一些标签所对应的元素可当成容器使用的，以建立坐标定位所包含的元素，如：
p、div 等，CSS 中称这样的元素为 block-level 元素，相邻的 block-level 元素往往从上到下垂直排列；
block-level 元素所包含的元素往往要么全为 block-level 元素要么全为 inline-level 元素，在一定条件下布局时可能会产生匿名 block-level 元素；
CSS 中将布局 block-level 元素的过程称为 block-flow
i、a、b、span 等标签及 text node 对应的元素则缺省为 inline-level 元素，inline-level 元素不能用来定位其他元素，但可以包含其他同为 inline-level 元素，相邻的 inline-level 元素，往往按照从左到右或从右到左的水平方向排列；
CSS 将布局 inline-level 相关元素的过程称为 line-flow
frame、image、object、embed、form 等对应的元素称为 replaced 元素，它表示这些元素的内部布局不由 CSS 来定义，而由浏览器来实现，而这些元素从外部来看相当于 block-level 元素，但可通过设置 display:inline 将其从外部看设为 inline-level 元素；
不同的 html 标签元素可以通过 display:inline、display:block、display:inline-block 等方式来调整其缺省 block-level 或 inline-level 属性；
每一个元素必须对应一个布局容器称之为 Containing Block，只有 block-level 元素可以成为 Containing Block；
一个 Containing Block 元素究竟包含哪些子元素或者某一元素的 Containing Block 元素究竟是谁，由其自身 position 属性及其在文档层次结构中所处的位置所确定，下一节会描述相关内容；每一个元素至少包含一个 Box 模型即由 margin、border、padding、content width/height 等属性所能描述的矩形区域；而这块区域相对于布局容器的坐标 top、left，往往由布局容器按照 block-flow、inline-flow 等规则布局该元素时确定；
如何确定页面元素显示位置
一个 html 标签元素的 position 属性可以设置为 static、relative、fixed、absolute、inherit 等，所有元素缺省为 static，其 Containing Block 布局容器元素为最近的祖先 block-level 元素，其属性 left、top、right、bottom 不起作用；
position 属性为 relative 的元素同 static 属性元素一样，但其 left、top 等属性可以有效，其坐标相对于布局容器而言；
position 属性为 absolute 的元素的布局容器元素是最近的除了其属性不为 static 的祖先 block-level 元素；
position 属性为 fiexed 的元素的布局容器元素是往往是根布局容器，但其定位坐标需要根据 ViewPort 的位置作相应调整；
一旦确定了其 Containing Block 布局容器，同时结合其自身的 block-level 或 inline-level 特性，布局时根据 block flow 和 inline flow 规则就可确定其起始位置，其中 inline-level 元素可在其布局容器提供的区域内自动换行；而 block-level 元素可在其布局容器提供的区域内自动换一个段落。
另外 float 属性为 left 或 right 元素较为特殊，则不遵守上面的规则，该元素让在其高度范围内的其他元素始终在其左边或右边。
如何确定页面元素大小
对于有定义其宽高的页面元素，则按照其定义的宽高来确定其大小，而对于象 text node 这样的 inline-level 则需要结合其字体大小及文字的多少等来确定其对应的宽高；如果页面元素所确定的宽高超过了布局容器 Containing Block 所能提供的宽高，同时其 overflow 属性为 visible 或 auto，则会提供滚动条来保证可以显示其所有内容。
除非定义了页面元素的宽高，一般说来页面元素的宽高是在布局的时候通过相关计算得出来的。
如何理解 z-index 的使用
页面元素 z-index 属性的出现，引入了页面元素三维布局的思路，提出分层的概念，具有同一 z-index 属性的所有元素按照上面提到的二维布局方式(确定其位置及大小)来布局，而不同 z-index 所代表的层的元素有可能被其他层的元素所覆盖。每一个页面元素只能处在一个 z-index 所对应的层中，所有元素缺省 z-index 为 0。
参考资源CSS WikiCSS SpecificationCSS basic box modelVisual formatting model details
转载来源：
http://ourpgh.blogspot.com/2008/11/webkit.html
转载本站文章《WebKit网页布局实现(0)：基本概念及标准篇》,请注明出处：https://www.zhoulujun.cn/html/webfront/browser/webkit/2021_0422_8633.html
还未添加个人签名 2021-06-25 加入
15年草根站长，尽在：zhoulujun.cn
评论