内容简介: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。
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 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Rancher常用操作及名词概念解析
- 分布式存储名词解析 – 一致性
- 不能更通俗易懂的机器学习名词解释
- 区块链点对点通信系统中的名词
- OpenGL ES 入门之旅--OpenGL 下的专业名词解析
- SQL Server关于predicate、density、selectivity、cardinality名词浅析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Seasoned Schemer
Daniel P. Friedman、Matthias Felleisen / The MIT Press / 1995-12-21 / USD 38.00
drawings by Duane Bibbyforeword and afterword by Guy L. Steele Jr.The notion that "thinking about computing is one of the most exciting things the human mind can do" sets both The Little Schemer (form......一起来看看 《The Seasoned Schemer》 这本书的介绍吧!
html转js在线工具
html转js在线工具
HEX CMYK 转换工具
HEX CMYK 互转工具