可视化格式模型(visual formatting model)

  对于可视化格式模型这个概念,官方的原话是这样的:How use agents process the document tree for visual media。翻译过来就是用户端在媒介中如何处理文档树。用户端这个对于我们来说通常指的就是浏览器。媒介呢,就是展示页面的介质,比如显示器。文档树呢,就是源文档中元素树的编码。树中,每一个元素恰好有一个父元素,当然除了根元素。

一.框的布局影响因素

  可视化格式模型中,每一个文档树中得元素都会根据box module(盒模型)来产生零个或多个控制框。这些框的布局由下列内容控制:

  • 框的尺寸和类型
  • 定位体系(包括normal flow、floats与absolute positioning)
  • 文档树中元素间的关系
  • 外部信息(如视图的大小,图形的内在尺寸等)

1.框的尺寸和类型

  框的类型指的是dispaly特性所决定的元素类型,这个特性会使元素产生相应的控制框。

2.定位体系

  主要是常规流、浮动与绝对定位。

3.文档树中元素间的关系   

  比如两个互为兄弟节点的浮动元素,前面的浮动元素会影响到后面浮动元素的布局。

4.外部信息  

  比如自适应页面,窗口的大小对布局有影响。图片的固有尺寸会影响行内替换元素的尺寸。

二.视图

  viewport,我这里译做视图,也有叫视点、视口的,其实据是可是窗口。

  当可视窗口的尺寸大小改变时,浏览器应该改变文档的布局。 比如,有些值依赖于可视窗口的大小,DIV ‘width‘ 的 "auto" 值,等等。

  当可视窗口的尺寸小于文档渲染的画布(也就是页面)的大小时,浏览器应该提供滚动机制。 每个画布最多有一个可视窗口。但是,浏览器可以同时渲染多个画布。

三.包含块

  CSS2中,很多框的位置和尺寸的计算都基于一个被称为包含块的长方形盒子的四边。通常地,生成的框表现为其派生框的包含块;我们说一个框“建立”了它的派生框的包含块。短语“一个框的包含块”意味着“该框所存在的那个包含块”,而不是它所生成的块。

  

基于框的包含块,每一个框都有一个定位,不过它不被包含块所限制;它可能溢出。

文档树的根生成一个框,作为后继布局的初始包含块。

初始包含块的宽度可以由根元素的width属性指定。如果该属性取值为‘auto‘,用户端提供初始宽度(如,用户端使用视图的当前宽度)。

初始包含块的高度可以由根元素的height属性指定。如果该属性取值为‘auto‘,包含块的高度将调整以适应文档内容。

初始包含块不可以被定位或浮动(即,用户端忽略根元素的position和float属性)。

包含块尺寸如何计算的细节的描述会在以后提到。

四.总结

  可视化格式模型这一篇主要还是一些基本的概念,让大家了解下到底什么是可视化格式模型,后面会详情分析下可视化格式模型中比较核心的概念。

参考资料:

  1.可视化格式模型。http://kaix.in/daddy/old/very/css/visuren.html

  2.http://www.w3.org/TR/CSS2/visuren.html

  3.http://w3help.org/zh-cn/kb/007/

时间: 2024-10-27 04:02:00

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

可视化格式模型(visual formatting model)系列

俗话说得好,万丈高楼平地起.在前端各种框架和工具层出不穷的今天,研究css标准.js的基础特性这些并不是浪费时间,相反打好了基础,才能更好的去拥抱变化. 这个东西呢,是准备当做一个系列来写,主要参考官方的标准和前辈们的一些归纳总结,不是全盘翻译,只是一个知识的梳理,查漏补缺.这个系列主要还是理论概念,我会尽量通过demo和自己平时遇到的一些具体问题来结合说明.这个系列呢,初步的考虑是以下几篇组成: 1.可视化格式模型(visual formatting model): 2.控制包含框的生成(Co

CSS——可视化格式模型

CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示): 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局: 换句话说,盒子模型规定了怎么在页面上摆放盒子,盒子的相互作用等等: CSS的可视化格式模型就是规定了浏览器在页面中如何处理文档树 1.关键字: 包含块(Containing Block). 控制框(Controlling Box). BFC(Block Formatting Context). IFC(Inline For

读《精通css》--第三章可视化格式模型

一. 盒模型: 1. IE 和 盒模型: 非标准盒模型 2. 外边距叠加:什么情况下外边距会叠加? 1)两个垂直的块元素 2)两个包含关系的块元素并且之间没有padding和border隔开 3)外边距与自身发生叠加,空元素,没有padding和border 4)空元素的外边距碰到另一个空元素的外边距. 解决办法:行内元素.浮动元素.绝对定位元素的外边距不会叠加.如果是包含关系的话,加上padding或者border. 二. 3种可视化格式模型: 1. 普通流:块级元素和行内元素. 1)块级框从

Introduction to the visual formatting model

原文:https://www.w3.org/TR/CSS2/visuren.html#block-formatting --------------------------------------- This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media. In the visual formatting m

精通css 高级web标准解决方案——可视化格式模型

1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之外的附加值. IE标准盒模型 w3c标准盒模型 我发现我以前总是记得有点混乱.现在绝对不会忘记了.box-sizing属性可以定义要使用哪种盒模型 解决这个问题分方法1:不要给元素添加具有指定宽度的内边距,尝试将内边距或者外边距添加到元素的父元素或者子元素. 方法2:待补充?? 2-对box-siz

三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动

在CSS中是有三种定位机制的:普通文档流.浮动和绝对定位.在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的. 普通文档流: 普通文档流,顾名思义,就是根据块级元素的标签在HTML里的顺序,像水流一样,从上至下.当然对于行内元素而言,还是在一行中水平排列的. 这里插入一个积累的小知识点. 行内元素可 以在水平(内间距.边框.外边距)方向上修改它们水平尺寸,但是在垂直方向上对行内元素的高度是毫无影响的,还有就是直接定义行内元素的 width/height也是毫无影响.对与行内元素来说

第3章 可视化格式模型

一·盒模型 1 IE 和盒模型 IE早期版本包括IE6,在混杂模式下使用自己的非标准盒模型,其width属性不是内容的宽度,而是内容,内边距,和边框宽度的总和.因此,IE专有的盒模型使元素预期小.目前最好的解决方法是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素或子元素.其他方法见后. 2 外边距叠加 两个或多个垂直外边距相遇,将叠加形成一个外边框,高度等于两者中的较大者. 可以利用外边距使段落之间的空间保持一致. 只有在普通文档流中才会叠加,行内框,浮动,绝对

CSS可视化格式模型(CSS Mastery随笔)

CSS渲染页面的时候,把每个文档元素看作是盒子. CSS盒子模型 margin,padding,border,内容. margin会出现margin折叠.上下元素的margin折叠.左右的不折叠.包含的元素之间marign也会折叠.margin折叠的好处是文档排版齐整. 每个元素都会有一个框.这个框分两种类型.块级元素的块框.行内元素的行内框. 行框:还有行框的概念,行框的高度由中间最高的行内框决定.设置行内框的高度.padding.margin并不影响行框的高度.行框的高度line-heigh

精通css 高级web标准解决方案——可视化格式模型-定位模型

CSS 中有三种定位机制:普通流.浮动.绝对定位.(默认为普通流) 改变文档流:display: inline-block; (支持到ie8及以上) 1-匿名块框: <div> 你好! <p>廖阿丽!</p> </div> 这一块中的“你好”,属于匿名块框,因为它没有与专门定义的元素想关联. 2-相对定位 元素相对定位就是相对于它本来的位置来定位的. <!DOCTYPE html> <html> <head> <ti