Web布局：视觉格式化模型

作者：大漠 日期：2019-09-27 点击：104
布局
Layout
会员专栏
CSS
Web布局系列

特别声明：为感谢社区广大朋友对小站的支持，自2019年10月1日至2019年11月11日开通年费VIP通道，年费价格为 ¥299.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS视觉格式化模型（英文称之Visual Formatting Model），是CSS 2.2规范中的第九部分。该模型主要是用来处理和在视觉媒体上显示文档时使用的计算规则。仅从这一句来来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是CSS中很重要的一部分，如果理解了该部分所涉及到的知识点，将有助于你更好的理解和学习CSS，特别是布局。

什么是视觉格式化模型

在盒模型的一章中我们了解到，在CSS的世界中，任何一个元素都是一个盒子，它具有一个专业术语，即盒模型。而视觉格式化模型会根据CSS盒模型将文档中的元素转换为一个个盒子。看到这里，很多同学可能更会感到困惑，“任何元素都是一个盒子，视觉格式化模型将元素转换为盒子，那这盒子是不是都是一样的盒子呢”？

首先要声明一点：视觉格式化模型和CSS盒模型不是同一个东西！

简单点说呢。Web页面（文档树）是由很一个个盒子组成（因为任何元素都可以被视为是一个盒子），而视觉格式化模型却是一套规则，用来计算元素转换为盒子的规则。而页面的布局都由这些盒子的所处的各处位置组合而成。那么理解了元素怎么转成盒子的规则，就理解了Web页面是怎么布局。而每个盒子的布局主要由以下几个因素决定：

  • 盒子的尺寸：精确指定、由约束条件指定或没有指定
  • 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）和块盒子（block）
  • 定位方案：普通流定位、浮动定位或绝对定位
  • 文档树中的其它元素：即当前盒子的子元素或兄弟元素
  • 视窗尺寸与位置
  • 所包含的图片的尺寸
  • 其他的某些外部因素

先来看一张图，这个图是由下面的HTML结构构造出来的：

<body>
    <header>
        <nav></nav>
    </header>
    <article>
        <p></p>
        <figure></figure>
        <p></p>
    </article>
    <aside></aside>
    <footer></footer>
</body>

每个元素都是一个盒子，盒子中可以包含另一个或多个盒子。也正如上图所示，CSS的视觉格式化模型会根据盒子的包含块（Containing Block，即包含其他盒子的块）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不会被包含块限制住，盒子的布局会撑破包含块（即跑出包含块的边界），对于这种现象，在CSS中常被称为溢出。

溢出是一个很有意思的东东，在Web布局中时常会碰到，但在这一章中不做方面的阐述。

回到前面所提到的问题，视觉格式化模型中的盒子和CSS中盒模型指的盒子是不是同一个盒子？用一名话来概括：

盒子是同一个盒子，但两个模型做着不同的事情。CSS的盒模型是计算盒子尺寸（width、height、padding、border和margin来决定）；视觉格式化模型是用来计算盒子位置（由前面提到的七个因素来决定）！

术语的简介

在接下来的内容中会涉及到很多个有关于CSS理论方面的术语，而且这些术语会令人难于理解。可能一时无法很好的理解透彻，但之并不要紧，随着你对CSS的深入，这些术语你会越来越清楚。到目前为止，你只需要知道有这些术语以及其概念。

块

块（Block），一个抽象的概念，一个块在文档流上占据一个独立的区域，块与块之间在垂直方向按照顺序依次堆叠（默认情况之下）。

包含块

包含块（Containing Block），指的是包含其他盒子的块。

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.

大至意思是，盒子的定位和大小都是参考一个矩形边缘来计算的，而这个矩形就是元素的容器块。一个元素的容器块大概定义如下：

  • 首先根元素就是一个初始容器块（Initial Containing Block）
  • 其次，如果元素的position是relative或static，其容器块就是由离它最近的块容器父元素或创建了一个格式化上下文的父级元素生成
  • 如果元素设置了position:fixed，它的容器块一般由视窗生成
  • 如果元素设置了position:absolute，它的容器块就由设置了position值为relative、absolute或fixed的最近父元素生成，如果父级元素都没有设置，则由根元素生成
  • transform属性值为非none的元素会生成一个容器块，其fixed的子元素会以此定位

那么如何来判断包含块呢？我们用w3chelp的一张图来向大家展示：

盒子

盒子（Box），一个抽象的概念，由CSS引擎根据文档中的内容所创建，主要用于文档元素的定位、布局和格式化等用途。盒子与元素并不是一一对应的，有时多个元素会合并一个盒子，有时一个元素会生成多个盒子（比如匿名盒子）。

众所周知，大家都知道一个HTML的文档会生成一个DOM树：

同样的，CSS中也会根据文档结构构建一个盒子树：

更多的人可能更易于接受CSSOM的概念。这里额外提一下，正是DOM树和CSSOM树才构建成了一颗渲染树：

其实这涉及到浏览器渲染方面的原理了，类似下图，布局仅是整个过程中的一部分：

剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/css/web-layout-visual-formatting-model.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部