重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

CSS排版:从毕昇开始,我们就开始用正常流了

使用负margin和padding
float
inline-block
自适应宽
等分布局问题
行内级格式化上下文
块级格式化上下文
格式化上下文
依次排列,排不下了换行
思考题
知识总结
使用技巧
原理
行为
复杂概念让新人望而却步
早期CSS设计排版需求不足
结语
正常流
问题
CSS排版

该思维导图由 AI 生成,仅供参考

你好,我是 winter。今天我们来聊聊 CSS 的正常流。
我想,在 CSS 中,大家最讨厌的大概就是排版部分了。因为早年的 CSS 设计上不能够很好地支持软件排版需求,导致大家需要使用很多黑科技,让很多新人望而却步。
现在 CSS 提供了很多种排版方式,我们有很多选项可以选择自己适合的那一种,然而,正常流却是我们绕不开的一种排版。
我们能够在网上看到关于正常流的各种资料,比如:块级格式化上下文、margin 折叠等等……这一系列的概念光是听起来就令人非常头痛。
所以我相信很多同学一定会奇怪:正常流到底正常在哪里。事实上,我认为正常流本身是简单和符合直觉的东西。
我们之所以会觉得它奇怪,是因为如果我们从严苛的 CSS 标准角度去理解正常流,规定排版的算法,就需要引入上述那些复杂的概念。但是,如果我们单纯地从感性认知的层面去理解正常流,它其实是简单的。
下面,就让我们先抛弃掉所有的已知概念,从感性认知的角度出发,一起去理解一下正常流。

正常流的行为

首先,我们先从词源来讲一讲排版这件事。
在毕昇发明活字印刷之前,排版这项工作是不存在的,相应的操作叫做“雕版”。人们要想印刷书籍,就需要依靠雕版工人去手工雕刻印版。
活字印刷的出现,将排版这个词引入进来,排版是活字印刷的 15 道工序之一,不论是古代的木质活字印刷,还是近代的铅质活字印刷,排版的过程是由排版工人一个字一个字从字架捡出,再排入版框中。实际上,这个过程就是一个流式处理的过程。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了CSS排版中的正常流,从历史渊源到基本行为和原理,再到具体的应用技巧,全面解析了正常流在排版中的重要性和灵活运用。通过对块级格式化上下文和行内级格式化上下文的解释,以及对等分布局和自适应宽的技巧讲解,读者可以更好地理解和运用正常流。文章以深入浅出的方式,帮助读者从感性认知的角度理解排版,同时也提供了严谨的排版规则和实际使用技巧。对于想要深入了解CSS排版的读者来说,这篇文章是一份很好的参考资料。通过本文,读者可以系统地了解正常流的行为、原理和应用,为他们在前端开发中更好地运用CSS排版提供了有力的支持。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(31)

  • 最新
  • 精选
  • 芝草晟林💦
    感觉 formatting那一段有点难理解...

    作者回复: 确实有点难

    2019-07-09
  • Scorpio
    我大flex天下第一!!!😂
    2019-03-14
    5
    112
  • AICC
    试了一下,发现上面第二个例子的代码并不能实现想要的效果 首先,因为hmtl代码的换行使得在inline-block的布局下两个盒子不能被放在一行这个通过父级font-size:0可解决 第二,由于auto在html的上的顺序是比fixed后面的,想像中的层级是高于fixed的,当auto是一个有背景的盒子,fixed就被完全遮挡了,可以通过transform:translateZ(0)把它提起来
    2019-03-14
    1
    56
  • William
    1. 等宽布局,不用外层font-size:0的方法的话,应该是.inner:not(last-child) { margin-right: -5px; }吧,前面元素均添加一个负外边距抵消掉空格大小。 2. 因为也是用inline-block,所以自适应宽需要加上 .outer { font-size: 0; }
    2019-03-14
    2
    17
  • 阿成
    Sir, have a look at this... https://github.com/aimergenge/inline-block-layout
    2019-03-16
    2
    15
  • ycswaves
    .auto { width: calc(100% - 200px); // ... rest of the necessary styles }
    2019-03-24
    10
  • 王天狗
    为什么不用 calc 呢
    2020-01-17
    7
  • 我要飞
    一个元素规定了自身周围至少需要的空间,这个解释深有体会,无可挑剔啊
    2019-05-21
    7
  • 七月有风
    在 CSS 标准中,规定了如何排布每一个文字或者盒的算法,这个算法依赖一个排版的“当前状态”,CSS 把这个当前状态称为“格式化上下文(formatting context)”。 还是没有理解这句话
    2019-03-17
    1
    7
  • 彧豪
    grid写大的整体的布局框架,flex写一维的可线性化的布局,这两种布局的兼容性已经更好了,再加上一些模块和脚手架打包的时候能自动为你添加浏览器前缀,布局变得越来越容易了
    2019-03-15
    7
收起评论
显示
设置
留言
31
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部