在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制：
 
可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( document tree )。以下是对其中关键词的解释：
用户端：对我们来说一般指浏览器。
媒介：展现页面的介质。例如，纸媒介，听觉浏览器和显示器等3。
文档树( document tree )：源文档中元素树的编码。树中，每一个元素恰好由一个父元素。根元素是例外，它没有父元素。就是 document 和页面上的元素所构成的类似树形的结构。
可视化格式模型，不会规定所有格式的细节（比如，它并不是指字间距）。
 
如果一个块元素容器盒子里面包含了一个块水平（block-level box）的盒子，会强迫该容器里面的所有盒子都成为块水平
<DIV>
  Some text    //这里产生了一个匿名块水平盒子
  <P>More text</P>
</DIV>
 
如果一个行内元素盒子里包含了块水平盒子，那么该容器会被打破：
<body>
<span>
    aa     //这里产生了一个匿名块水平盒子
    <p>bb</p>
    cc      //这里产生了一个匿名块水平盒子
</span>
</body>
结果是一个body 块水平盒子里包含了两个匿名块水平盒子和一个p标签的块水平盒子
 
匿名盒子会继承容器的部分属性，例如上面例子给span加上一个边框
 
匿名盒子不会被相对单位作为参照物，例如
<div>
    "
        <div style="width: 30%;"> </div>  //这个时候不会以父元素匿名盒子来计算，而是以上面的非匿名块水平盒子作为参照计算
    "
</div>
 
块元素内不被行内元素包裹的文字会产生匿名行内盒子
<p>
    aa     //由p产生匿名行内盒子，空格不会产生匿名行内盒子
    <em>bb<em>
    cc
</p>
 
 
浮动元素，决定定位元素和相对根元素被称为out of flow，其余元素被称之为in flow ，根元素相对而言，例如：
<p>
    <a><span></span></a>
</p>
p元素是不在这个结构的flow里面的

Visual formatting model 可视化格式模型的更多相关文章

  1. visual formatting model (可视化格式模型）【持续修正】

    概念: visual formatting model,可视化格式模型 The CSS visual formatting model is an algorithm that processes a ...

  2. 可视化格式模型(visual formatting model)

    原文 简书原文:https://www.jianshu.com/p/7632f16ff555 大纲 1.认识可视化模型 2.可视化模型的内容 3.可视化模型的影响因素 1.认识可视化模型 盒子模型是C ...

  3. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  4. CSS——可视化格式模型

    CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示): 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局: 换句话说,盒子模型规定了 ...

  5. Introduction to the visual formatting model

    原文:https://www.w3.org/TR/CSS2/visuren.html#block-formatting --------------------------------------- ...

  6. CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）

    2.定位概念 上一节熟悉了盒模型, 现在来看一下可视化格式模型和定位模型. 理解这两个模型的细微差异是非常重要的, 因为它们一起控制着如何在页面上布置每个元素 2.1 可视化格式模型 CSS有三种基本 ...

  7. CSS概念 - 可视化格式模型（一） 盒模型与外边距叠加

    可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...

  8. CSS - 视觉格式化模型（Visual formatting model）

    几个概念 块:block,一个抽象的概念,块与块之间在垂直方向上按照顺序依次堆叠. 行内:inline,一个抽象的概念,行内与行内之间在水平方向上按照顺序依次堆叠(会有换行). 元素:element, ...

  9. 精通css 高级web标准解决方案——可视化格式模型-盒模型

    1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...

随机推荐

  1. java编程基础复习-------第二章

    一.标识符 java中标识符的命名规则: 以数字.字母.下划线和$符号组成:不能用数字开头:不能是java的关键字. 注意:不要用$命名标识符.习惯上,$只用在机器自动产生的源代码中. 二.关键字 1 ...

  2. Linux视频主要概述

    Linux当中称之为视频的主要为俩个方面(主要以kernel为主): 1.源代码video目录指的是主显示输出,也就是帧缓冲(Frame Buffer)驱动部分,表示对基本图形层的显示支持; 2.源代 ...

  3. Python 基础之函数、深浅copy,set及练习

    三元运算符通常在Python里被称为条件表达式,这些表达式基于真(true)/假(not)的条件判断,在Python 2.4以上才有了三元操作. 语法格式: X if C else Y 有了三元表达式 ...

  4. C#打印机操作类

    using System; using System.Collections.Generic; using System.Text; namespace MacPrinter { public cla ...

  5. 小白学Maven第一篇配置

    在百度上搜Maven进入官网,然后在进Download里面把apache-maven-3.5.0-bin.zip(记得不要下错)下载下来 然后进行安装 (前提你配置了Java如下图) Java配置: ...

  6. 全面解读JavaScript入门到进阶，100%基础知识掌握！

    一.JavaScript 简介 1.JavaScript 是 Web 的编程语言,是前端开发必须掌握的三门语言之一,即: HTML   定义了网页的内容 CSS      描述了网页的布局 JavaS ...

  7. linux 守护进程编程

    概述: Daemon运行在后台也称作"后台服务进程". 它是没有控制终端与之相连的进程.它独立于控制终端.通常周期的执行某种任务. 守护进程脱离终端是为了避免进程在执行过程中的信息 ...

  8. 添加 hexo yilia 主题的文章阅读量

    根据此篇博客(点击查看) 配置出自己的博客阅读量,里面介绍了如何配置开通 leancloud 应用 当然介绍我如何配置 yilia 显示自己的浏览量的. 首先在 yilia 主题下修改 _config ...

  9. ELK系列~对fluentd参数的理解

    这段时候一直在研究ELK框架,主要集成在对fluentd和nxlog的研究上,国内文章不多,主要看了一下官方的API,配合自己的理解,总结了一下,希望可以帮到刚入行的朋友们! Fluentd(日志收集 ...

  10. 用 Smali 手写一个可运行的 HelloWorld！！！

    一.前言 Android 的 App 实际上并不是运行在 Java 虚拟机中,而是运行在 Dalvik 虚拟机中.Dalvik 虚拟机对 Java 虚拟机做了一些额外的优化,让它更适用于移动设备.而 ...