原文

  简书原文:https://www.jianshu.com/p/7632f16ff555

大纲

  1、认识可视化模型
  2、可视化模型的内容
  3、可视化模型的影响因素

1、认识可视化模型

  盒子模型是CSS中所有元素产生的box的自身构成,而可视化格式模型则是把这些box,按照规则摆放到页面上,也就是通常所说的布局。换句话说,可视化格式模型是整个页面的模型,这个模型规定了怎么在页面里摆放box,box相互作用等等。属于CSS的最为核心的概念之一。
  可视化格式模型,官方的说法是,它规定了用户端在媒介中如何处理文档树(document tree)。
    ● 用户端,对我们来说一般指浏览器。
    ● 媒介,相当于我们展现页面的介质。如,纸媒介,听觉浏览器和显示器等。
    ● 文档树(document tree)是指源文档中元素树的编码。树中,每一个元素恰好由一个父元素。根元素是例外,它没有父元素。就是document和页面上的元素所构成的类似树形的结构。

2、可视化模型的内容

  网页布局根据可视化格式模型来进行布局,而影响可视化格式模型的大致有几个方面,外部环境,box模型,定位机制,文档树。
    1、外部环境指的是设备,窗口等外设信息
    2、文档树指的是各个元素在文档树中的位置从而影响网页排版
    3、box模型讲述的是网页上的各个元素以盒子的形式在网页上布局,但是是以怎样的盒子在网页上布局是根据各种不同的情况而定的
    4、定位机制讲述的是如何将各个不同的盒子按照需求排列到网页上

  网页布局本质上就是讲各个HTML元素盒子在网页上按照不同的定位机制进行排版定位。
  块框( block boxes )和行内框( inline boxes )只是三种定位体系之一的常规流( Normal flow ),而块级格式上下文(Block Formatting Context)和行内格式上下文( inline formatting )只是他们的元素创建的格式上下文,他们本身其实并不是上下文,是对内框的排列的一种约束。

3、可视化模型的影响因素

  在可视化格式模型中,每一个元素都会根据盒子模型产生0个或多个box,而这些box的布局受以下因素的影响:

3.1、box尺寸和类型

  类型是指 display 特性所决定的元素类型,如:DIV 是块级元素,SPAN 是行内元素等。

3.2、定位体系

  元素在布局时,根据3种定位体系定位。分别是,常规流、浮动和绝对定位。这3种定位体系的详细内容会在后面讲到。

3.3、 在文档树中,元素之间的关系

  比如,一个块元素包含两个互为兄弟节点的浮动元素,后面那个浮动元素的布局,会受前面元素以及它包含块的影响。

3.4、 外部信息

  比如,可视窗口的大小,我们有时候会做页面自适应窗口大小的功能,就是因为,窗口大小对布局有影响。再如,图片的固有尺寸,会影响行内替换元素的尺寸,进而影响这个布局。

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

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

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

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

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

  3. Visual formatting model 可视化格式模型

    在可视化格式模型里,每个元素都是由一个或者多个盒子组成,这些盒子的布局由下面规则控制: box dimensions and type.(块元素和行内元素) positioning scheme (n ...

  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. deep-in-es6(五)

    解构 Destructuring: 解构赋值允许使用类似数组或对象字面量的语法将数组和对象的属性赋值给给中变量. 一般情况访问数组中的前三个元素: var first = arr[0]; var se ...

  2. RPC简易学习

    0.RPC简介 RPC,   英文全称:Remote Process Call.   中文全称:远程过程调用. 客户端通过网络请求调用远程服务端对外暴露服务.常用的两种RPC协议:TCP.HTTP. ...

  3. Directx9.0 学习教程3 -图形学之创建点 线 三角形 等

    1.首先 介绍点的表示方法 struct CUSTOMVERTEX { float x,y,z; }; CUSTOMVERTEX Vertices[] = { {-5.0, -5.0, 0.0}, { ...

  4. XMPP开发之从零開始

    对于server的搭建和设置.我在这里就不再多说了.有好多前辈已经帮大家攻克了.能够參考下这篇博客 XMPPserver配置 我依照这个博客配置好了,server后,然后在网上參照代码写了一个小的de ...

  5. vue ---webpack 打包上线

     先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对路径 ...

  6. map(froeach改变值,map生成新数组)

    http://www.365mini.com/page/jquery-map.htm <input id="n1" name="uid" type=&qu ...

  7. JavaScript学习总结(6)——js弹出框、对话框、提示框、弹窗总结

    一.JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 =================== ...

  8. 有趣的Ruby-学习笔记4

    Ruby块 块.在我看来就是插入一段可变的函数 block_name{ statement1 statement2 .......... } 看起来不知道是什么,只是别急,继续往下看. 块函数通过yi ...

  9. code-代码平台服务器路径

    下面记录的是各个平台的服务器路径(va使用) ("repo init -u ssh://vanzo/platform_89/manifest.git") ("repo i ...

  10. C#中防止程序多次运行

    C#中如何防止程序多次运行?只要在程序入口点函数Main()中的开始部分添加如注释部分的代码,就能快捷实现.   示例代码如下: using System; using System.Collecti ...