在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制：
 
可视化格式模型的官方说法是，它规定了用户端在媒介中如何处理文档树( 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. 安装Vue2的devtools发生错误npm ERR! code EINTEGRITY npm ERR! sha1-HTFDXrRzR2Ew8Bv9zlMSCVgPsS0= integrity checksum failed when using sha1: wanted sha1-HTFDXrRzR2Ew8Bv9zlMSCVgPsS0= but got sha1-Z6BeTMF4nhAO6h5A

    1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程  执行npm install ---- ...

  2. Ubuntu16.04 Using Note

    I meet lots of problems when i installed and use ubuntu 16.04.below is my using note: (my operating ...

  3. 使用LayUI操作数据表格

    接着 上一篇 继续完善我们的demo,这次我们加一个搜索按钮 搜索 在table标签的上方,加入这样一组html <div class="demoTable"> 搜索商 ...

  4. 机器学习-KNN分类器

    1.  K-近邻(k-Nearest Neighbors,KNN)的原理 通过测量不同特征值之间的距离来衡量相似度的方法进行分类. 2.  KNN算法过程 训练样本集:样本集中每个特征值都已经做好类别 ...

  5. http://codeforces.com/contest/838/problem/A

    A. Binary Blocks time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  6. 解决VMware下安装Ubuntu 16.04 不支持1920X1080分辨率的问题

    解决方法: flashmx@ubuntu:~$ cvt # 192.07M9) hsync: 67.16 kHz; pclk: 173.00 MHz Modeline -hsync +vsync fl ...

  7. Python实战之SocketServer模块

    文章出处:http://www.cnblogs.com/wupeiqi/articles/5040823.html SocketServer内部使用 IO多路复用 以及 "多线程" ...

  8. 个人工作中ssd、audio python脚本总结

    1.os.system(cmd)或者os.popen(cmd)调用外部命令 cmd中需要注意特殊字符的转义功能,如: USBSTOR\DISK&VEN_GENERIC-&PROD_SD ...

  9. HDU3844Tour （好题）

    题意:   有N个点,M个单向边,现在要你设计N条路线覆盖所有的点,每个点都属于且值属于一个环.(为什么是N条边:和最小生成树为什么有N-1条边是一样的证明). 解析:  每个点都有一个喜欢对象(出度 ...

  10. 深入浅出AQS之组件概览

    之前分析了AQS中的独占锁,共享锁,条件队列三大模块,现在从结构上来看看AQS各个组件的情况. 原文地址:http://www.jianshu.com/p/49b86f9cd7ab 深入浅出AQS之独 ...