zoukankan      html  css  js  c++  java
  • 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系

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

      有一些 DOM 元素对应多个可视化对象。它们往往是具有复杂结构的元素,无法用单一的矩形来描述。例如,“select”元素有 3 个呈现器:一个用于显示区域,一个用于下拉列表框,还有一个用于按钮。如果由于宽度不够,文本无法在一行中显示而分为多行,那么新的行也会作为新的呈现器而添加。 
    另一个关于多呈现器的例子是格式无效的 HTML。根据 CSS 规范,inline 元素只能包含 block 元素或 inline 元素中的一种。如果出现了混合内容,则应创建匿名的 block 呈现器,以包裹 inline 元素。

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

    图:呈现树及其对应的 DOM 树 (3.1)。初始容器 block 为“viewport”,而在 Webkit 中则为“RenderView”对象。






  • 相关阅读:
    用户输入
    hashlib 加密
    vue-cli项目配置mock数据(新版本)
    vue-cli 本地开发mock数据使用方法
    使用nodeJs安装Vue-cli
    购物车实现三
    购物车实现二
    购物车实现一
    极限开发与敏捷开发
    敏捷软件开发-极限编程
  • 原文地址:https://www.cnblogs.com/menu/p/7058888.html
Copyright © 2011-2022 走看看