前言

  在理解浮动和定位时,触碰到文档流概念。为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型)。

正文

  DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构。例如:

  根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点。
  • 每个 HTML 元素是元素节点。
  • HTML 元素内的文本是文本节点。
  • 每个 HTML 属性是属性节点。
  • 注释是注释节点。

   文档流是另一个概念,流实际上就是浏览器在页面上摆放Html元素所用的方法,大多数元素默认在文档流中。浏览器从Html文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。即:元素按HTML中编写的先后顺序,上下左右堆叠排列。其中块级元素前后换行,内联元素前后不换行。

  这篇文章会持续更新,等我对文档流和DOM有了新的理解。

  

      

Html文档流和文档对象模型DOM理解的更多相关文章

  1. IE文档版本和文档流模式

    使用X-UA-Compatible来设置IE浏览器兼容模式 文件兼容性用于定义让IE如何编译你的网页.此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式. < ...

  2. engineercms支持文档协作和文档流程,基于flow

    我们用于管理文件的系统,比如网盘云盘等,并不具备流程功能,所谓流程,本质是修改文档状态,比如,从初始状态,不同权限的人登录,查看这个文件,具有修改这个文档状态的权限,比如将初始状态修改为已审查状态. ...

  3. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  4. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  5. CSS文档流、块级元素、内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  6. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  7. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

  8. JavaScript编程:文档对象模型DOM

    5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...

  9. 文档对象模型DOM

    文档对象模型 DOM 1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 提供给用户操作document obj 的标准接口 文档对象模型 是表示和操作 H ...

随机推荐

  1. svn中cleanup作用

    我们开发项目的时候,用版本控制软件svn提交项目时候难免会遇到cleanup,那么这个提示是怎么产生的呢?它有什么作用呢? 产生原因:SVN 本地更新时,由于一些操作中断更新,如磁盘空间不够,用户取消 ...

  2. Python爬取代理ip

    # -*- coding:utf-8 -*- #author : willowj import urllib import urllib2 from bs4 import BeautifulSoup ...

  3. [moka同学收藏]Vim升华之树形目录插件NERDTree安装图解

    无意中看到实验室的朋友使用的vim竟然能在左边显示树形目录,感觉很方便,这样子文件夹有什么文件一目了然.她说是一个插件叫NERDTree,安装执行后的效果如下,不是你想要的效果就别安了.我的系统是Ub ...

  4. UDS(ISO14229-2006) 汉译(No.1 范围)

    ISO14229指定的数据链路是独立于诊断服务的,该数据链路允许测试仪(Client)操作ECU(Server)中的诊断功能(如电子燃油喷射.变速箱.ABS等)并接入一条嵌入车辆的串行数据链路.它指定 ...

  5. 【夯实Mysql基础】mysql explain执行计划详解

    原文地址   1).id列数字越大越先执行,如果说数字一样大,那么就从上往下依次执行,id列为null的就表是这是一个结果集,不需要使用它来进行查询.   2).select_type列常见的有: A ...

  6. 轻松掌握:JavaScript策略模式

    策略模式 定义:定义一系列的算法,把它们一个个封装成函数,也可把它们作为属性统一封装进一个对象,然后再定义一个方法,该方法可根据参数自动选择执行对应的算法. 一般用于在实现一个功能时,有很多个方案可选 ...

  7. Sharepoint学习笔记—ECM系列—文档列表的Metedata Navigation与Key Filter功能的实现

    如果一个文档列表中存放了成百上千的文档,想要快速的找到你想要的还真不是件容易的事,Sharepoint提供了Metedata Navigation与Key Filter功能可以帮助我们快速的过滤和定位 ...

  8. iOS之处理不等高TableViewCell的几种方法

    课题一:如何计算Cell高度 方案一:直接法(面向对象) 直接法,就是把数据布局到Cell上,然后拿到Cell最底部控件的MaxY值. 第一步:创建Cell并正确设置约束,使文字区域高度能够根据文字内 ...

  9. AFNetworking的理解

    AFNetworking的理解 使用方法 1. 新建的工程中导入AFNetworking3.0中的(AFNetworking 和UIKit+AFNetworking两个文件夹) 2. 在用到AFNet ...

  10. [转]给 C# 开发者的代码审查清单

    这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...