• 呈现器的布局处理与宽度计算

    呈现器的宽度与高度
    服务器君一共花费 19.312 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    布局处理

    布局通常具有以下模式:

    1. 父呈现器确定自己的宽度。
    2. 父呈现器依次处理子呈现器,并且:
      • 放置子呈现器(设置 x,y 坐标)。
      • 如果有必要,调用子呈现器的布局(如果子呈现器是 dirty 的,或者这是全局布局,或出于其他某些原因),这会计算子呈现器的高度。
    3. 父呈现器根据子呈现器的累加高度以及边距和补白的高度来设置自身高度,此值也可供父呈现器的父呈现器使用。
    4. 将其 dirty 位设置为 false。

    Firefox 使用“state”对象 (nsHTMLReflowState) 作为布局的参数(称为“reflow”),这其中包括了父呈现器的宽度。

    Firefox 布局的输出为“metrics”对象 (nsHTMLReflowMetrics),其包含计算得出的呈现器高度。

    宽度计算

    呈现器宽度是根据容器块的宽度、呈现器样式中的“width”属性以及边距和边框计算得出的。

    例如以下 div 的宽度:

    <div style="width:30%"/>
    

    将由 Webkit 计算如下(BenderBox 类,calcWidth 方法):

    • 容器的宽度取容器的 availableWidth 和 0 中的较大值。availableWidth 在本例中相当于 contentWidth,计算公式如下:
      clientWidth() - paddingLeft() - paddingRight()
      
      clientWidth 和 clientHeight 表示一个对象的内部(除去边框和滚动条)。
    • 元素的宽度是“width”样式属性。它会根据容器宽度的百分比计算得出一个绝对值。
    • 然后加上水平方向的边框和补白。

    现在计算得出的是“preferred width”。然后需要计算最小宽度和最大宽度。

    如果首选宽度大于最大宽度,那么应使用最大宽度。如果首选宽度小于最小宽度(最小的不可破开单位),那么应使用最小宽度。

    这些值会缓存起来,以用于需要布局而宽度不变的情况。

    换行

    如果呈现器在布局过程中需要换行,会立即停止布局,并告知其父代需要换行。父代会创建额外的呈现器,并对其调用布局。

更多 推荐条目

Welcome to NowaMagic Academy!

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

本章最新发布
随机专题
  1. [Python程序设计] urls.py设置技巧 8 个条目
  2. [PHP程序设计] Nginx基本操作释疑 7 个条目
  3. [PHP程序设计] 对输入文件类型的检测 1 个条目
  4. [PHP程序设计] PHP数组探索 4 个条目
  5. [Python程序设计] Django数据库模型 6 个条目
  6. [移动开发] Android 开发调试工具 ADB 3 个条目
  7. [智力开发与知识管理] 学习编程为什么没会这么难? 7 个条目
  8. [JavaScript程序设计] Web实时通信技术名词解析 5 个条目
  9. [软件工程与项目管理] 浏览器的CSS解析 7 个条目
  10. [Linux操作系统] CentOS上使用EPEL Repository 2 个条目
  11. [搜索引擎优化] 与百度权重有关的信息 2 个条目
  12. [软件工程与项目管理] 浏览器初步介绍 8 个条目
窗口 -- [博客]