原文

  简书原文: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. 使用Java开发微信公众平台(四)——消息的接收与响应

    上一篇文章(http://www.jerehedu.com/fenxiang/171807_for_detail.htm )中,我们学习了使用Java语言开发微信公众平台的第一部分——环境搭建与开发接 ...

  2. 单调栈+贪心维护LIS

    普通:O(\(N^2\)) 状态:dp[j]表示,以j结尾的最长的上升子序列 转移:dp[j]=dp[i]+1(if a[j]>a[i] ) 初始化:dp[i]=1 优化(nlogn) solu ...

  3. wscript shell

    http://blog.csdn.net/songques/article/details/8309569 http://baike.baidu.com/link?url=_P6z73_Ih9R79T ...

  4. iOS 创建静态库文件时去掉当中的Symbols

    在project中创建静态库文件时.默认会将一些Symbols加到静态库文件里.这样做有两个缺点: 1.假设引用静态库文件的project中发生了bug.就会直接跳转到静态库的源代码. 也许有人问:静 ...

  5. RK3066 实现LED闪烁的代码分析

    实现LED灯的闪烁,须要在驱动里加入一个定时器函数,详细实现涉及到了LED GPIO驱动.用户空间程序调用驱动程序. 1.首先来看LED设备驱动注冊过程,代码位于../kernel/drivers/l ...

  6. 基于jQuery的一组图片的滚动

    css: .displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{po ...

  7. Vue简介以及基本使用

    Vue 是一套构建用户界面的渐进式 框架 框架和库? 框架(基于自身的特点向用户提供一套完整的解决方案,控制权在框架本身,需要使用者按照框架所规定的某种规范进行开发) Vue Angular Reac ...

  8. Spider_lxml

    xpath工具(解析) xpath 在XML文档中查找信息的语言,同样适用于HTML文档的检索 xpath辅助工具 Chrome插件 :XPath Helper 打开 :Ctrl + Shift + ...

  9. CISP/CISA 每日一题 17

     CISSP 每日一题(答) What are often added to passwords to maketheir resultant hash secure and resistant to ...

  10. php中 重载(二)

    接着上一次说的重载,我们了解下php中的重载,方法的重载,假设有管重载定义,參考:php中 重载(一)这个文章,谢谢.作为刚開始学习的人,大牛勿喷: 基本是两个方法 __call,当调用对一个不可訪问 ...