摘要：块级盒参与块格式化上下文。行内级盒参与行内格式化上下文块格式化上下文行内格式化上下文相对定位浮动盒就是一个在当前行向左或向右移动的盒。浮动绝对定位绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中全部移除不会影响后面的兄弟。
在可视化格式模型(Visual formatting model)当中,文档树中的每个元素根据其盒模型生成0个或多个盒.这些盒的布局由(以下因素)控制:
盒尺寸与类型
定位模式(常规流,浮动与绝对定位)
文档树中元素间的关系
外部信息(例如,视口大小,内含图片的固定尺寸等等)
包含块(containing blocks)在 CSS2.1 中，很多框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称作是包含块( containing block )。 一般来说，(元素)生成的框会扮演它子孙元素包含块的角色；我们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。
绝对定位元素的包含块如果其祖先元素是行内元素,则包含块取决于其祖先元素的direction特性
如果direction是ltr,包含块的顶,左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges),右、下边是祖先元素生成的最后一个框的右,下内边距边界(padding edges)
包含块的宽度可能是负的
如果direction是rtl,包含块的顶、右边是祖先元素生成的的第一个框的顶、右内边距边界(padding edges),左、下边是祖先元素生成的最后一个框的左、下内边距边界(padding edges)
其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素(absolute、relative 或者 fixed)的内边界
KB008: 包含块( Containing block )
视口(viewport)连续媒体的用户代理一般会给用户提供一个视口（屏幕上的一个窗口或者视图区域），用户通过它来查阅文档。视口尺寸变化（见初始包含块）时，用户代理可能会改变文档的布局
当视口比渲染文档的画布区域小时，用户代理应该提供一种滚动机制。一个画布最多对应一个视口，但用户代理可能会渲染到多个画布上（即提供同一文档的不同视图）
盒的生成(Box generation)CSS视觉格式化模型的一部分工作是从文档元素生成盒.生成的盒拥有不同类型,并对视觉格式化模型的处理产生影响.生成盒的类型取决于CSS属性display
块级元素(Block-level elements)当元素的CSS属性display为block,list-item或table时,它就是块级元素
块级元素视觉上呈现为块,竖直排列
块级盒(block-level box)块级盒用于描述他与父元素和兄弟元素之间的表现
块级盒参与块格式化上下文(block formatting context)
每个块级元素至少生成一个块级盒,称为主要块级盒(principal block-level box).一些元素,比如
主要块级盒将包含后代元素生成的盒以及生成的内容
主要块级盒是可以使用定位方案(position scheme)的盒
块容器盒(block container box)块容器盒描述跟它后代之间的影响
一个块级盒也可能是块容器盒
块容器盒(block container box)只包含其它块级盒,或生成一个行内格式化上下文(inline formatting context),由此只包含行内盒
有些块级盒,比如表格,可替换元素不是块容器盒.相反,一些块容器盒.比如非替换行内块及非替换表格单元格,不是块级盒
同时块容器盒的块级盒称为块盒(block boxes)
匿名块盒(Anonymous block boxes)有时候需要添加补充性盒,这些盒称为匿名盒(Anonymous block boxes),它们没有名字,不能被CSS选择符选中
不能被CSS选择符选中意味着不能用样式表添加样式.这意味着对于可继承属性,取父元素值.不可继承属性,取初始值
块容器盒要么只包含行内级盒(inline-level box),要么只包含块级盒(block-level box).但通常文档会同时包含两者.在这种情况下,将创建匿名块盒来包含毗邻的行内级盒
Some inline textfollowed by a paragraph
followed by more inline text.
将创建两个匿名块盒,一个包含
前面的文本(Some inline text),一个包含
后面的文本(followed by more inline text),结构如下:
另一种将创建匿名块盒的情况是,一个行内盒包含了一个或几个块盒.在这种情况下,包含块盒的盒将拆分为两个行内盒放置于块盒前后,然后分别由两个匿名块盒包含.这样块盒就与两个包含行内元素的匿名块盒形成了兄弟关系.
如果行内盒包含多个块盒,并且这些块盒之间没有夹杂内容,将在这些块盒前后创建匿名块盒
行内级元素(inline-level elements)第一个匿名盒 块级盒子 第二个匿名盒
当元素的CSS属性display为inline,inline-block或inline-table时,称它为行内级元素
视觉上它将内容与其它行内级元素排列为多行.典型的如段落内容,有文本(可以有多种格式譬如着重),或图片,都是行内级元素
行内级盒(inline-level boxes)行内级元素生成行内级盒
参与行内格式化上下文(inline formatting context)
行内级盒分为行内盒和原子行内级盒
行内盒(inline boxes)参与生成行内格式化上下文的行内级盒称为行内盒
所有display:inline的非替换元素生成的盒是行内盒
原子行内级盒(atomic inline-level boxes)不参与生成行内格式化上下文的行内级盒称为原子行内级盒
这些盒由可替换行内元素,或display值为inline-block或inline-table的元素生成,不能拆分成多个盒
匿名行内盒(Anonymous inline boxes)span 里的文本 可以 分成多行因为它是个行内盒。span 里的文本 不能分成多行 因为它 是个行内块盒。
类似于块盒,CSS引擎有时自动生成行内盒.这些盒也是匿名的,因为他们没有对应的选择器名字.他们继承所有可继承的属性,非继承的属性取initial
匿名行内盒最常见的例子是块盒直接包含文本,文本将包含在匿名行内盒中.空白如果使用white-space去掉,则不会生成匿名行内盒
行盒(Lines boxes)行盒由行内格式化上下文(inline formatting context)产生的盒,用于表示一行
在块盒里面,行盒从块盒一边排版到另一边.当有浮动时,行盒从左浮动的最右边排版到右浮动的最左边.
行盒是技术上的实现,开发者通常不用操心它
插入盒(Run-in boxes)插入盒,由display:run-in定义.由后续盒的类型决定是块盒还是行盒.可以用来在第一个段落中插入标题
盒的生成
定位模式(Positioning schemes)CSS 2.1中，一个盒可能根据三种定位模式来布局：
常规流 CSS 2.1中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位
浮动 在浮动模型中，一个盒先根据常规流布局，然后从流中取出来尽可能地左移或右移。其它内容可能会沿着浮动（盒）的一侧排列（Content may flow along the side of a float）
绝对定位 在绝对定位模型中，一个盒会从常规流中全部移除（它不会影响后面的兄弟）并根据包含块确定位置
如果一个元素是浮动的，绝对定位的或者是根元素，它就叫流外（out of flow）（元素）。如果一个元素不是流外的，就叫流内（in-flow）（元素）。元素A的流是由A和所有最近的流外祖先为A的流内元素组成的集合
css脱离文档流到底是什么意思，脱离文档流就不占据空间了吗？脱离文档流是不是指该元素从dom树中脱离？
常规流（Normal flow）常规流中的盒属于一个格式化上下文，可能是块或是行内，但不能都是（既是块又是行内）。块级盒参与块格式化上下文。行内级盒参与行内格式化上下文
| 块格式化上下文 |
| 行内格式化上下文 |
| 相对定位 |
float（盒）就是一个在当前行向左或向右移动的盒。float（或者"floated"或者"floating"盒）最有意思的特性是其它内容会沿着它的一侧排列（可以通过"clear"属性禁止这种行为）。其它内容会沿着left-floated盒的右侧，right-floated盒的左侧排列。
| 浮动 |
绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中全部移除（不会影响后面的兄弟）。一个绝对定位的盒会为常规流中的子级和绝对（不是fixed）定位的后代建立一个新的包含块。然而一个绝对定位的元素的内容不会沿着任何其它盒排列。它们可能会遮住其它盒的内容（或者它们自身被遮住），取决于重叠盒的堆叠层级（stack levels）
本规范中出现的绝对定位元素（或者它的盒）表示元素的"position"属性值为"absolute"或者"fixed"
| 绝对定位 |
对于一个定位的盒，z-index属性指定了：
当前堆叠（stacking context）上下文中，该盒的堆叠层级（stack level）
该盒是否（应该）建立一个堆叠上下文
| z-index |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116548.html
摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。 作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...
摘要：本篇则会分享的逻辑属性以及盒子模型。的逻辑属性年月日，的工作组发布了逻辑属性和值的首份工作草案。那么按着这个规则去修改文本属性时，就会出现上述这种不符合语法规则的状态。大概也是基于这个原因，所以发布了新的逻辑属性与值。因此称为匿名盒子。 作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第一章CSS的语法与工作流中介绍了CSS的语法规则以及基本的...
摘要：盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。 视觉格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻译，译者在原文基础上...
摘要：并且这种过程遵循标准的描述只要不是和绝对定位方式布局的，都在普通流里面。定位相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先相对绝对元素决定的。 视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将...
阅读 2956·2023-04-25 17:22
阅读 1524·2019-08-30 15:54
阅读 1248·2019-08-30 15:53
阅读 1766·2019-08-30 15:43
阅读 2949·2019-08-29 12:29
阅读 1184·2019-08-26 11:37
阅读 3232·2019-08-23 18:02
阅读 1583·2019-08-23 14:15
