• 呈现器的布局与layout过程

    浏览器的流模型
    服务器君一共花费 234.289 ms 进行了 4 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    这个 chapter 的名字叫“呈现器的布局”,那么是什么意思呢?

    呈现器在创建完成并添加到呈现树时,这个时候并没有包含位置和大小信息。计算这些值的过程称为布局或重排。

    HTML 采用基于流的布局模型,这意味着大多数情况下只要一次遍历就能计算出几何信息。处于流中靠后位置元素通常不会影响靠前位置元素的几何特征,因此布局可以按从左至右、从上至下的顺序遍历文档。但是也有例外情况,比如 HTML 表格的计算就需要不止一次的遍历。

    坐标系是相对于根框架而建立的,使用的是上坐标和左坐标。

    布局是一个递归的过程。它从根呈现器(对应于 HTML 文档的 <html> 元素)开始,然后递归遍历部分或所有的框架层次结构,为每一个需要计算的呈现器计算几何信息。

    根呈现器的位置左边是 0,0,其尺寸为视口(也就是浏览器窗口的可见区域)。

    所有的呈现器都有一个“layout”或者“reflow”方法,每一个呈现器都会调用其需要进行布局的子代的 layout 方法。

    既然谈到了 layout,这里再简单谈谈它。

    前面提到了,每当一个Render节点加入Render树时,它不包含位置和尺寸,计算元素的位置和尺寸的过程称为Layout。

    Browser使用流模型的Layout算法。所谓流模型,即是指Layout的过程只需进行一遍即可完成,后出现在流中的元素不会影响前出现在流中的元素,Layout过程只需从左至右从上至下一遍完成即可。但实际实现中,流模型会有例外。

    Layout是一个递归的过程,每个节点都负责自己及其子节点的Layout。Layout结果是相对父节点的坐标和尺寸。其过程可以简述为:

    • 父节点确定自己的宽度
    • 父节点完成子节点放置,确定其相对坐标
    • 节点确定自己的宽度和高度
    • 父节点根据所有的子节点高度计算自己的高度

    在后面我们会提到更多关于布局的细节。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [移动开发] 简单了解Android Fragment 3 个条目
  2. [移动开发] Android布局基本知识 3 个条目
  3. [搜索引擎优化] 百度搜索引擎优化指南 3 个条目
  4. [Python程序设计] 写几个简单的Tornado程序吧 5 个条目
  5. [Python程序设计] Django架构流程分析 7 个条目
  6. [数据库技术] 无限级分类数据表设计 4 个条目
  7. [PHP程序设计] PHP与函数式编程 1 个条目
  8. [移动开发] Android开发基础知识 4 个条目
  9. [Python程序设计] Python数据类型 11 个条目
  10. [智力开发与知识管理] 学习编程为什么没会这么难? 7 个条目
  11. [Python程序设计] 从PHP到Python 3 个条目
  12. [移动开发] Android属性系统Property 9 个条目
窗口 -- [协会]