【Hello CSS】第六章-文档流与排版

什么是“ 正常流 ”？ 其实就是我们日常所说的“ 文档流 ”。 在 W3C 官方文档里对应的是“ normal flow ”。

正常流的盒子属于 格式化上下文(FC) ，在 CSS2.2 中可以是 表格 、 块 或 内联 。 在 CSS3 中引入了 flex 跟 grid ，当然以后会引入得更多。

块级盒子(block-level boxes)与创建 块级格式化上下文(BFC) 有关；

行内级盒子(inline-level boxes)与创建 行内级格式化上下文(IFC) 有关。

BFC

鱼头注：在之前的文章中有介绍过如何生成一个BFC，本章便不再累述。

根据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 的表现也会有差异。

当然以上都是我的个人理解，如果有更科学更标准的理解方式或者不同的想法，可以加鱼头微信“ krisChans95 ”来探讨。

层叠上下文与层叠顺序

我们首先来看一张很著名的图

上面便是在同样的上下文中，元素的层叠规则（CSS3以后的除外，那规则会比较复杂）。元素的 z-index 值 只在父级层叠上下文中有意义。级层叠上下文被自动视为父级层叠上下文的一个独立单元。

文档中的层叠上下文由满足以下任意一个条件的元素形成：

• 根元素 (HTML),
• z-index 值不为 "auto"的 绝对/相对定位，
• 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity ），
• 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 来定义方向的属性，这是一个可伸缩的布局模型。

一个设有 display:flex 或 display:inline-flex 的元素是一个 伸缩容器 ，伸缩容器的子元素被称为为 伸缩项目 ，这些子元素使用伸缩布局模型来排版。

语法如下：

display: flex/inline-flex;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
复制代码

flex 属性可以指定1个，2个或3个值。

单值语法: 值必须为以下其中之一:

• 一个无单位 数( <number> ) : 它会被当作 <flex-grow>的值。
• 一个有效的**宽度(width)**值: 它会被当作 <flex-basis>的值。
• 关键字 none, auto ,或 initial .

双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

<flex-shrink>
<flex-basis>

三值语法:

<flex-grow>
<flex-shrink>
<flex-basis>

Grid

我印象中第一次接触 Grid 布局的时候，开个Chrome的实验性功能也就只能能支持个 repeat(4, 200px) ，但如今已经除了IE，其他浏览器差不多也是Full support了(如果你还不了解这个布局模型，可以翻阅MDN)。

在这里顺便提一下， Flex 是一维布局， Grid 是二维布局。意思就是 Flex 只能同时在一个方向进行作用，而 Grid 却可以在纵横两个方向同时工作。

语法如下：

display: grid/inline-grid;
gird: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
复制代码

我们来看看MDN的示例语法：

/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
复制代码

上面便是 Grid 布局的语法情况，我第一次看的时候，想都没想，直接把页面关了。虽然看起来复杂，但是可选状态越多，自由度越高。

一些常用的灵活尺寸

想看上述对比，可以查看陈慧真老师的CSS CONF演讲，地址在这： www.chenhuijing.com/slides/53-c…

后记

本章的内容要深究起来是非常庞大的，鱼头我在准备内容的时候有想过是不是要另外再开个布局的系列去分享，但是我想把本文当成是一个关键字集合来供自己以及有需要的人来做目录也是极好的。我认为 CSS 中最难的部分就是布局了，虽然W3C本身提供了很多的属性以及规范来处理这些布局问题的，但是涉及到了现实的项目，更多时候是错综复杂的，但是随着 CSS 逻辑属性的变化，以及各类新布局系统的出现，相信以后的布局会简单得多。

本章内容就这么草草结束了，关于上面提到的，或者没有提到的与之相关的，以后有机会鱼头会新开个系列来分享。当然如果看到这里的你有任何布局上的见解或问题也欢迎来找鱼头探讨。

参考资料：

聊聊CSS中的层叠相关概念

CSS Conf -《新时代CSS布局》学习总结

新时代CSS布局

CSS世界

CSS Display Module Level 3

CSS Flexible Box Layout Module Level 1

CSS Grid Layout Module Level 1

CSS Box Alignment Module Level 3

写给自己看的display: grid布局教程

写给自己看的display: flex布局教程

CSS深入理解流体特性和BFC特性下多栏自适应布局

块格式化上下文

Normal flow

css中的IFC

【Hello CSS】系列

【Hello CSS】 是以 CSS 基础概念为主题的系列文章，旨在帮助大家更深刻地了解并且提高 CSS 在各位开发者心目中的地位。由于鱼头我水平有限，文笔有限，如果各位在文章中发现有任何不合理，不正确的地方，还烦不吝指出，我会非常感谢的；如果通过文章有任何想法或疑问，也希望各位能积极留言，我们互相探讨；如果通过本系列文章有所收获，这就让鱼头我喜不自胜了！

如果你也喜欢`CSS`，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “ 进击的CSS ”。你可以扫描下方二维码，添加鱼头微信，添加时注明 “ 加群 ”，如果你觉得我的文章有趣，欢迎关注微信公众号“ 鱼头的Web海洋 ”。衷心希望可以遇见你。