在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制：
 
可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( 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. "svn: E155010: 提交失败"问题解决

    习惯于通过命令行操作svn,今天如往常一样提交代码: AnnytekiMacBook-Air:weiyibao Anny$ svn ci -m "code" 居然报错,如下: sv ...

  2. JSP入门 导出文件

    1.图片校验码 <img  src="captcha.jpg"  /> web.xml配置 <servlet>      <servlet-name& ...

  3. 【前端】深入浅出Javascript中的数值转换

    由于Javascript是一门弱类型的语言,在我们的代码中无时无刻不在发生着类型转换,所以了解Javascript中的类型转换对于了解我们认识Javascript的运行原理至关重要. 本文主要从数值转 ...

  4. 【重点突破】——Canvas技术绘制随机改变的验证码

    一.引言 本文主要是我在学习Canvas技术绘图时的一个小练习,绘制随机改变的验证码图片,虽然真正的项目里不这么做,但这个练习是一个掌握Canvas技术很好的综合练习.(真正的项目中验证码图片使用服务 ...

  5. C语言编程练习（一）

    问题一: 问题描述:输入n个数,n<=100,找到其中最小的数和最大的数 输入样例: 4                      1 2 3 4 输出样例:14 #include " ...

  6. 705. New Distinct Substrings spoj（后缀数组求所有不同子串）

    705. New Distinct Substrings Problem code: SUBST1 Given a string, we need to find the total number o ...

  7. httpd配置文件规则说明和一些基本指令

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  8. 前端基础之初识 HTML

    HTML HTML(Hypertext Markup Language)即超文本标记语言,是WWW的描述语言.设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便 ...

  9. bootstrap 的可编辑下拉框 jquery.editable-select

    搜了半天发现在某处下载jquery.editable-select需要积分,于是整理出来方便 其他人. 先上下载链接:http://pan.baidu.com/s/1kUXvwlL      pass ...

  10. ubuntu中运行python脚本

    1. 运行方式一 新建test.py文件: touch test.py 然后vim test.py打开并编辑: print 'Hello World' 打开终端,输入命令: python test.p ...