CSS排版：从毕昇开始，我们就开始用正常流了
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。今天我们来聊聊 CSS 的正常流。
我想，在 CSS 中，大家最讨厌的大概就是排版部分了。因为早年的 CSS 设计上不能够很好地支持软件排版需求，导致大家需要使用很多黑科技，让很多新人望而却步。
现在 CSS 提供了很多种排版方式，我们有很多选项可以选择自己适合的那一种，然而，正常流却是我们绕不开的一种排版。
我们能够在网上看到关于正常流的各种资料，比如：块级格式化上下文、margin 折叠等等……这一系列的概念光是听起来就令人非常头痛。
所以我相信很多同学一定会奇怪：正常流到底正常在哪里。事实上，我认为正常流本身是简单和符合直觉的东西。
我们之所以会觉得它奇怪，是因为如果我们从严苛的 CSS 标准角度去理解正常流，规定排版的算法，就需要引入上述那些复杂的概念。但是，如果我们单纯地从感性认知的层面去理解正常流，它其实是简单的。
下面，就让我们先抛弃掉所有的已知概念，从感性认知的角度出发，一起去理解一下正常流。
正常流的行为
首先，我们先从词源来讲一讲排版这件事。
在毕昇发明活字印刷之前，排版这项工作是不存在的，相应的操作叫做“雕版”。人们要想印刷书籍，就需要依靠雕版工人去手工雕刻印版。
活字印刷的出现，将排版这个词引入进来，排版是活字印刷的 15 道工序之一，不论是古代的木质活字印刷，还是近代的铅质活字印刷，排版的过程是由排版工人一个字一个字从字架捡出，再排入版框中。实际上，这个过程就是一个流式处理的过程。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了CSS排版中的正常流，从历史渊源到基本行为和原理，再到具体的应用技巧，全面解析了正常流在排版中的重要性和灵活运用。通过对块级格式化上下文和行内级格式化上下文的解释，以及对等分布局和自适应宽的技巧讲解，读者可以更好地理解和运用正常流。文章以深入浅出的方式，帮助读者从感性认知的角度理解排版，同时也提供了严谨的排版规则和实际使用技巧。对于想要深入了解CSS排版的读者来说，这篇文章是一份很好的参考资料。通过本文，读者可以系统地了解正常流的行为、原理和应用，为他们在前端开发中更好地运用CSS排版提供了有力的支持。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(31)
- 最新
- 精选
芝草晟林💦感觉 formatting那一段有点难理解...作者回复: 确实有点难
2019-07-09
Scorpio我大flex天下第一！！！😂2019-03-145112
AICC试了一下，发现上面第二个例子的代码并不能实现想要的效果 首先，因为hmtl代码的换行使得在inline-block的布局下两个盒子不能被放在一行这个通过父级font-size:0可解决 第二，由于auto在html的上的顺序是比fixed后面的，想像中的层级是高于fixed的，当auto是一个有背景的盒子，fixed就被完全遮挡了,可以通过transform：translateZ(0)把它提起来2019-03-14156
William1. 等宽布局，不用外层font-size:0的方法的话，应该是.inner:not(last-child) { margin-right: -5px; }吧，前面元素均添加一个负外边距抵消掉空格大小。 2. 因为也是用inline-block，所以自适应宽需要加上 .outer { font-size: 0; }2019-03-14217
阿成Sir, have a look at this... https://github.com/aimergenge/inline-block-layout2019-03-16215- ycswaves.auto { width: calc(100% - 200px); // ... rest of the necessary styles }2019-03-2410
王天狗为什么不用 calc 呢2020-01-177
我要飞一个元素规定了自身周围至少需要的空间,这个解释深有体会,无可挑剔啊2019-05-217
七月有风在 CSS 标准中，规定了如何排布每一个文字或者盒的算法，这个算法依赖一个排版的“当前状态”，CSS 把这个当前状态称为“格式化上下文（formatting context）”。 还是没有理解这句话2019-03-1717
彧豪grid写大的整体的布局框架，flex写一维的可线性化的布局，这两种布局的兼容性已经更好了，再加上一些模块和脚手架打包的时候能自动为你添加浏览器前缀，布局变得越来越容易了2019-03-157
收起评论