WebKit网页布局实现之基本概念及标准篇

转载 2011年03月04日 18:01:00

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

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

其中Visual formatting model details对其主要规则进行过具体描述,通过下面相关总结和汇总希望能对其主要要点有一定的认识与理解。

二、布局页面的基本概念
要在一块指定的画布(或窗口)上布局一些要素,往往需要按从上到下或从左到右(或从右到左)的规则来布局这些元素,而有些元素则可以包含其他元素,当作布局容器来使用。其中浏览网页的原生窗口就可看作一个布局容器的根。

由于页面内容的大小可能超过原生窗口提供的显示区域的大小,CSS中称页面上当前显示出来的区域为ViewPort,这个ViewPort相对页面的原始位置可通过滚动条来调整;

CSS标准中定义了html中的一些标签所对应的元素可当成容器使用的,以建立坐标定位所包含的元素如p、div,CSS中称这样的元素为block-level元素,相邻的block-level元素往往从上到下垂直排列;

而 其他象i、a、b、span等标签及text node对应的元素则缺省为inline-level元素,inline-level元素不能用来定位其他元素,但可以包含其他同为inline- level元素,相邻的inline-level元素,往往按照从左到右或从右到左的水平方向排列;

block-level元素所包含的元素往往要么全为block-level元素要么全为inline-level元素,在一定条件下布局时可能会产生匿名block-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等规则布局该元素时确定;

CSS中将布局block-level元素的过程称为block-flow;将布局inline-level相关元素的过程称为line-flow;

而 CSS对html中诸如标签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属性;

三、如何确定页面元素显示位置
一 个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 布局标准的内容相当多,有的还相当复杂,这里只是初步的了解其基本原则及要素,也未必在各种条件下都成立,希望能为我们能从WebKit代码去了解 WebKit究竟是如何布局页面元素作一定准备而已,如果要想对CSS标准有更深入的具体理解,只有不断的练习及阅读理解CSS布局标准文档。

相关文章推荐

WebKit网页布局实现之主要数据结构篇

在有了对CSS网页布局标准及相关概念的认识之后,我们可以更加深入的理解WebKit究竟是如何实现其网页布局,同时实现对CSS布局标准的支持。 毕竟标准归标准,要高效的实现这些标准,不同的实现肯定有其...

WebKit网页布局实现之主要架构篇

在有了对CSS网页布局标准及相关概念的认识之后,我们可以更加深入的理解WebKit究竟是如何实现其网页布局,同时实现对CSS布局标准的支持。 毕竟标准归标准,要高效的实现这些标准,不同的实现肯定...
  • GMstart
  • GMstart
  • 2011年09月28日 13:10
  • 684

WebKit网页布局实现之主要架构篇

在有了对CSS网页布局标准及相关概念的认识之后,我们可以更加深入的理解WebKit究竟是如何实现其网页布局,同时实现对CSS布局标准的支持。 毕竟标准归标准,要高效的实现这些标准,不同的实现肯定有其...

webkit网页布局(1)数据结构

注:我在转载的基础上增加了自己的一些观点。 在有了对CSS网页布局标准及相关概念的认识之后,我们可以更加深入的理解WebKit究竟是如何实现其网页布局,同时实现对CSS布局标准的支持。 ...
  • GMstart
  • GMstart
  • 2011年08月30日 14:03
  • 1570

webkit网页布局(2)

一、继续Render树的构成 1、子类RenderButton RenderButton代表html中input标签type为button时对应的Render树节点,它直接继承自RenderFle...
  • GMstart
  • GMstart
  • 2011年08月30日 14:04
  • 2334

webkit网页布局(1)数据结构

原帖地址 : http://blog.csdn.net/gmstart/article/details/6732330

webkit网页布局(1)数据结构

在有了对CSS网页布局标准及相关概念的认识之后,我们可以更加深入的理解WebKit究竟是如何实现其网页布局,同时实现对CSS布局标准的支持。 毕竟标准归标准,要高效的实现这些标准,不同的实现肯定有其...
  • LQ0622
  • LQ0622
  • 2011年09月23日 13:57
  • 1063

web前端如何让网页布局稳定性和标准性?

刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面。我们写的网页布局怎么样才是合理的,...

web前端如何让网页布局稳定性和标准性

web前端如何让网页布局稳定性和标准性?因此再这里,传智播客老师给大家列出网页布局标准性、合理性和兼容性的一些方法,希望对刚开始学习css的同学有所帮助。一、 标记的重要性。位于文档的最前面,用于向浏...

PHP.3-DIV+CSS标准网页布局准备工作(上)

DIV+CSS标准网页布局准备工作(上) 概述 使用“DIV+CSS”对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中,已经不再...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebKit网页布局实现之基本概念及标准篇
举报原因:
原因补充:

(最多只允许输入30个字)