CSS VFM 中易混淆的名词概念

栏目: CSS · 发布时间: 6年前

内容简介:CSS VFM 中易混淆的名词概念

第一遍看 CSS2.1 VFM(Visual Formatting Model)是看别人整理的 笔记 ,辅助理解很不错,但是在名词概念上作者跳过了一些或者打乱了顺序,所以现在看回文档时发现当初有一些理解不太正确。于是在这篇文章将这些概念系统整理了一遍。

Element 与 Box

  • 第一个概念是 Element (元素)与 Box (盒子)。用 Element 的时候是指 document tree (文档树)的节点,Box 则是指元素根据 VFM 和 Box Model 生成的盒子。一个元素可能生成零个或多个盒子。

  • Box Model 描述了一个矩形的盒子。每个盒子都有 content area,可能有 padding, border, margin areas。

CSS VFM 中易混淆的名词概念

Block-level Element

  • display 值为 'block/list-item/table' 的元素叫 block-level element

  • 每个 block-level element 都会生成一个 principal block-level box (list-item 还会生成其它盒子)。

  • 除了 table box 和 replaced element,block-level box 都是 block container box

    Block container box 要么只包含 block-level boxes (宣布了 BFC),要么只包含 inline-level boxes (宣布了 IFC)。(BFC: Block Formatting Context, IFC: Inline Formatting Context)

    (Block-level box 指的是这个盒子本身,它参与的是 BFC;而 block container box 说的是这个盒子内部,宣布了 BFC 或 IFC)。

    反过来 block container box 则不一定是 block-level box,还可以是 non-replaced inline block 和 non-replaced table cell(即这些盒子参与 IFC ,内部也可以宣布 BFC 或 IFC)。

  • 同时是 block-level box 和 block container box 的盒子也叫做 block box

Inline-level element

  • display 值为 'inline/inline-table/inline-block' 的元素叫 inline-level element

  • Inline-level element 会生成 inline-level box

  • display 为 'inline' 的 non-replaced element 生成的盒子也叫 inline box ,指其内部参与的与其自身所在的是同个 IFC。

    (同样,Inline-level box 说的是盒子本身,inline box 说的是盒子内部)。

  • 不是 inline box 的 inline-level box (如 replaced inline-level element, inline-block element, inline-table element)叫做 atomic inline-level box ,它们以不透明的方式参与到 IFC 中,内部不参与自身所在的 IFC。

  • Inline-level boxes 打横排成一行行的 line boxes


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

翻转课堂的可汗学院

翻转课堂的可汗学院

萨尔曼·可汗(Salman Khan) / 刘婧 / 浙江人民出版社 / 2014-4-1 / 49.00元

MIT和哈佛毕业的高材生缘何放弃金融分析师工作投身教育事业?YouTube上的“可汗学院频道”至今共吸引了163.3万订阅者,观看次数超过3.55亿次,它为什么如此大受欢迎?创始人萨尔曼·可汗阐述属于未来的教育理念——让地球上的任何人都能随时随地享受世界一流的免费教育! 现行教育模式已有200余年历史,可汗认为,在互联网蓬勃发展、社交网络盛况空前的时代,免费、灵活、适合个体、全球共享的教育才......一起来看看 《翻转课堂的可汗学院》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具