• 呈现树与DOM树的关系

    包含可视化元素
    服务器君一共花费 8.511 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的
    1. Chapter:

    呈现器是和 DOM 元素相对应的,但并非一一对应。

    比如非可视化的 DOM 元素不会插入呈现树中,例如“head”元素。如果元素的 display 属性值为“none”,那么也不会显示在呈现树中(但是 visibility 属性值为“hidden”的元素仍会显示)。

    有一些 DOM 元素对应多个可视化对象。它们往往是具有复杂结构的元素,无法用单一的矩形来描述。例如,“select”元素有 3 个呈现器:一个用于显示区域,一个用于下拉列表框,还有一个用于按钮。如果由于宽度不够,文本无法在一行中显示而分为多行,那么新的行也会作为新的呈现器而添加。 

    另一个关于多呈现器的例子是格式无效的 HTML。根据 CSS 规范,inline 元素只能包含 block 元素或 inline 元素中的一种。如果出现了混合内容,则应创建匿名的 block 呈现器,以包裹 inline 元素。

    有一些呈现对象对应于 DOM 节点,但在树中所在的位置与 DOM 节点不同。浮动定位和绝对定位的元素就是这样,它们处于正常的流程之外,放置在树中的其他地方,并映射到真正的框架,而放在原位的是占位框架。

    呈现树及其对应的 DOM 树

    图中初始容器 block 为“viewport”,而在 Webkit 中则为“RenderView”对象。

更多 推荐条目

Welcome to NowaMagic Academy!

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

本章最新发布
随机专题
  1. [Python程序设计] Django与表单 4 个条目
  2. [软件工程与项目管理] 开始使用Git 3 个条目
  3. [PHP程序设计] Nginx基本操作释疑 7 个条目
  4. [智力开发与知识管理] 超越整体性学习 5 个条目
  5. [C语言程序设计] C语言里的全局变量 2 个条目
  6. [数据库技术] MySQL常用自带函数 3 个条目
  7. [数据库技术] 数据库范式篇 5 个条目
  8. [软件工程与项目管理] 开始了解Git 5 个条目
  9. [移动开发] 从代码角度去认识HttpClient 2 个条目
  10. [移动开发] Android SQLite增删查改实例(数据:魔弹之王) 2 个条目
  11. [PHP程序设计] 对输入文件类型的检测 1 个条目
  12. [移动开发] Android开发基础知识 4 个条目
窗口