Web布局:视觉格式化模型


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

什么是视觉格式化模型

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

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

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

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


    

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

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

术语的简介

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

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

包含块

包含块(Containing Block),指的是包含其他盒子的块。

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

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

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

盒子

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

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

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

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

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

剩余80%内容付费后可查看 本部分为付费内容,支付后可查看 支付4.99元 已支付?输入手机号查看 包月会员登录 购买包月会员推荐