正常流
什么是“正常流”？ 其实就是我们日常所说的“文档流”。
正常流的盒子属于格式化上下文(FC)，在CSS2.2中可以是表格、块或内联。 在CSS3中引入了flex跟grid，当然以后会引入得更多。
块级盒子(block-level boxes) 与创建 块级格式化上下文(BFC) 有关；
行内级盒子(inline-level boxes) 与创建 行内级格式化上下文(IFC) 有关。
根据W3C上的解释：
浮动、绝对定位元素、块容器（例如inline-blocks、table-cells、and table-captions）都不是块盒子。除了overflow以外的visible（除非该值已经传播到了视口）为其内容建立新的BFC。
表现是什么？
表现就是在包含块内一个盒子一个盒子不重叠地垂直排列，两个兄弟盒子直接的垂直距离由margin决定。浮动也是如此（虽然有可能两个盒子的距离会因为floats而变小），除非该盒子再创建一个新的BFC。
简单来说，BFC就是一个独立不干扰外界也不受外界干扰的盒子啊(/ω＼)
IFC
Mmmmm，BFC还是相对好理解，IFC比较复杂，W3C上所占的篇幅也比BFC多得多的。
简单来说，跟BFC表现不一样的盒子就是IFC了(*❦ω❦)。
跟BFC不一样，IFC内的盒子会从包含块的顶部一个接着一个地水平排列。这些盒子会考虑水平margin，border跟padding。垂直对齐的方式也略有复杂。然后，包含形成一条线的框的矩形区域称为线盒（line box）。
线盒（line box）的宽度：由浮动情况跟它所在的包含块决定。
线盒（line box）的高度：由line-height的计算结果决定。
基线（baseline）
线盒（line box） 的高度由line-height的计算结果决定。
line-height的定义就是线盒（line box）内两基线（baseline）（W3C原文）的间距。
vertical-align的默认值就是基线。
字母x
你们还记得读书时用的英语作业本吗？
如上图所示，我们看到小写字母x的位置，它的上下边缘就是我们的基线（baseline），但下边缘才是我们日常使用的属性值。顺便一提，CSS单位ex便是指的这个字母x的高度。
如何理解IFC
自从翻了CSS的发展史之后，了解了CSS的诞生背景之后，其实很多东西理解起来就轻松了。IFC之所以比BFC复杂，原因就在于很多非规律的成分，在西文了，我们可以简单粗暴的理解为英语作业本的表现，但是在writing-mode不同，文字表现不同的各个国家，IFC的表现也会有差异。
层叠上下文与层叠顺序
我们首先来看一张很著名的图
上面便是在同样的上下文中，元素的层叠规则（CSS3以后的除外，那规则会比较复杂）。元素的 z-index 值只在父级层叠上下文中有意义。级层叠上下文被自动视为父级层叠上下文的一个独立单元。
文档中的层叠上下文由满足以下任意一个条件的元素形成：
根元素 (HTML),
z-index 值不为
auto的 绝对/相对定位，一个 z-index 值不为
auto的 flex 项目 (flex item)，即：父元素display: flex|inline-flex，opacity属性值小于 1 的元素，transform属性值不为none的元素，mix-blend-mode属性值不为 "normal"的元素，filter值不为none的元素，perspective值不为none的元素，isolation属性被设置为isolate的元素，position: fixed在
will-change中指定了任意 CSS 属性，即便你没有直接指定这些属性的值-webkit-overflow-scrolling属性被设置touch的元素
新时代的布局
Flex
我想到如今，应该很少人会没写过或者没了解过 Flex （不知道的可以翻阅MDN）。
这个是 CSS 史上第一个以 start-end 来定义方向的属性，这是一个可伸缩的布局模型。
一个设有 单值语法: 值必须为以下其中之一: 一个无单位 数( 一个有效的 宽度(width) 值: 它会被当作 关键字 双值语法: 第一个值必须为一个无单位数，并且它会被当作 一个无单位数：它会被当作 一个有效的宽度值: 它会被当作 三值语法: 第一个值必须为一个无单位数，并且它会被当作 第二个值必须为一个无单位数，并且它会被当作 第三个值必须为一个有效的宽度值， 并且它会被当作 display:flex 或 display:inline-flex 的元素是一个伸缩容器，伸缩容器的子元素被称为为flex 属性可以指定1个，2个或3个值。<number>) : 它会被当作<flex-grow>的值。<flex-basis>的值。none、 auto, 或 initial 。<flex-grow> 的值。第二个值必须为以下之一：<flex-shrink> 的值。<flex-basis> 的值。<flex-grow> 的值。<flex-shrink> 的值。<flex-basis> 的值。Grid
| 属性 | 定义 |
|---|---|
| fr | 可伸缩长度单位，网格容器中可用空间的一等份。 |
| auto | 自由分配，由具体情况决定。 |
| minmax() | 定义了一个长宽范围的闭区间。 |
| fit-content() | 同等于min(maximum size, max(minimum size, argument)) |
以上属性对比结果如下：
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
