在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制：
 
可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( 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. unable to dequeue a cell with identifier MealTableViewCell

    1 问题描述 Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'unable ...

  2. 使用jquery的方法和技巧2，点击多选框的jquery响应

    使用jquery来控制多选框的变化 功能描述: 1.第一层 当选中后台应用(App1)时,所有多选框都被选择. 当取消选中后台应用(App1)时,所有多选框都被取消选择. 第一层的逻辑如下: 2.第二 ...

  3. Hive基础（1）---Hive是什么

    1. Hive是什么 Hive是基于Hadoop的数据仓库解决方案.由于Hadoop本身在数据存储和计算方面有很好的可扩展性和高容错性,因此使用Hive构建的数据仓库也秉承了这些特性. 这是来自官方的 ...

  4. 翻译：MLAPP（2.2节 概率论简要回顾）

    笔者:尝试翻译MLAPP(Machine Learning: a Probabilistic Perspective)一书,供机器学习的学者参考,如有错误理解之处请指出,不胜感激!(如需转载,请联系本 ...

  5. hdu3974 找上属的模拟

    There is a company that has N employees(numbered from 1 to N),every employee in the company has a im ...

  6. UWP 改变Button样式

    -----some words------ 1.Control:控制 (我们理解成控件) 2.Template:模板 3.Ellipse 椭圆 4.Content 内容 5.Presenter 节目主 ...

  7. java 连接数据库测试类

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  8. Python 并发编程(一)之线程

    常用用法 t.is_alive() Python中线程会在一个单独的系统级别线程中执行(比如一个POSIX线程或者一个Windows线程)这些线程将由操作系统来全权管理.线程一旦启动,将独立执行直到目 ...

  9. spring mvc 多线程并发

    ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编写出优美的多线程程序. http://www.xuebuyuan.com/1628190.html 我们 ...

  10. Struts2 06--系统拦截器防止数据重复提交

    一.拦截器简要概述 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然后在之前或之后加入某些操作.拦截是AOP的一种实现策略. 在W ...