WebKit网页布局实现(0)：基本概念及标准篇

2023-04-09 18:23:49 浏览数 (2)

作为一个广受好评的浏览器引擎，其网页布局的质量(包括速度、效率、符合标准度等)往往是其关键，那么WebKit究竟是如何布局网页上的所有元素(包括滚动条、文字、图片、按钮、下拉框等)呢？其主要数据结构及流程都包括哪些呢？其布局的基本概念及标准都有哪些呢？下面分别介绍WebKit对其实现及运用。我们首先从关于布局的基本概念及标准的认识开始。

CSS布局相关标准介绍

其实我们对要素的布局都有不同程度的了解如我们使用Office时经常使用对一段文字的居中、靠左等操作，复杂一点有设置编号及文字与图片的环绕对应关系等，其实布局的关键在于确定页面元素的显示位置及大小，而页面中主要包括有文字、图片、按钮等页面元素，为了有效的组织布局这些页面元素，一些专家学者经过多年的摸索，总结并设计了布局这些元素所涉及的一些规则及标准，这就是CSS标准。

这里安利一下：

  1. css过去及未来展望—分析css演进及排版布局的考量
  2. css布局优化：布局计算限制— contain/will-change/合成层

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 Wiki CSS Specification CSS basic box model Visual 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

webkit

0 人点赞