写点什么

关于 CSS 排版,其实从毕升开始,我们就开始用正常流了

  • 2019-04-17
  • 本文字数:2063 字

    阅读完需:约 7 分钟

关于CSS排版,其实从毕升开始,我们就开始用正常流了

你好,我是 winter。这是我在极客时间《重学前端》专栏的第 24 篇文章「CSS的正常流」,今天分享给你。


我想,在 CSS 中,大家最讨厌的大概就是排版部分了。因为早年的 CSS 设计上不能够很好地支持软件排版需求,导致大家需要使用很多黑科技,让很多新人望而却步。现在 CSS 提供了很多种排版方式,我们有很多选项可以选择自己适合的那一种,然而,正常流却是我们绕不开的一种排版。


我们能够在网上看到关于正常流的各种资料,比如:块级格式化上下文、margin 折叠等等……这一系列的概念光是听起来就令人非常头痛。


很多同学一定会奇怪:正常流到底正常在哪里。事实上,正常流本身是简单和符合直觉的东西。我们之所以会觉得它奇怪,是因为如果我们从严苛的 CSS 标准角度去理解正常流,规定排版的算法,就需要引入上述那些复杂的概念。但是,如果我们单纯地从感性认知的层面去理解正常流,它其实是简单的。


下面,就让我们先抛弃掉所有的已知概念,从感性认知的角度出发,一起去理解一下正常流。

正常流的行为

首先,我们先从词源来讲一讲排版这件事。


在毕昇发明活字印刷之前,排版这项工作是不存在的,相应的操作叫做“雕版”。人们要想印刷书籍,就需要依靠雕版工人去手工雕刻印版。


活字印刷的出现,将排版这个词引入进来,排版是活字印刷的 15 道工序之一,不论是古代的木质活字印刷,还是近代的铅质活字印刷,排版的过程是由排版工人一个字一个字从字架捡出,再排入版框中。实际上,这个过程就是一个流式处理的过程。


从古代活字印刷开始,到现代的出版行业,再到今天的 Web,排版过程其实并没有什么本质的变化,只不过,今天在我们的 CSS 中,排版需要处理的内容,不再是简单的大小相同的木字或者铅字,而是有着不同字体和字号的富文本,以及插入在富文本中大小不等的盒。


并且,在这些过程中,都会有一个正常流的存在。那么,正常流是什么样的呢?


我们可以用一句话来描述正常流的排版行为,那就是:依次排列,排不下了换行。这个操作很简单吧,我想,任何一个不懂排版的人都会将其作为排版时的第一反应。


理解了正常流的基本概念,剩下的功能只需要在它的基础上延伸一下就好。


在正常流基础上,我们有 float 相关规则,使得一些盒占据了正常流需要的空间,我们可以把 float 理解为“文字环绕”。



我们又有 vertical-align 相关规则,规定了如何在垂直方向对齐盒。vertical-align 相关规则看起来复杂,但是实际上,基线、文字顶/底、行顶/底都是我们正常书写文字时需要用到的概念,只是我们平时不一定会总结它们。


除此之外,margin 折叠是很多人非常不理解的一种设计,但是实际上我们可以把 margin 理解为“一个元素规定了自身周围至少需要的空间”,这样,我们就非常容易理解为什么 margin 需要折叠了。

正常流的原理

我们前面描述了正常流的行为,接下来我们要切换一下模式,用比较严谨的姿势来理解一下正常流。


在 CSS 标准中,规定了如何排布每一个文字或者盒的算法,这个算法依赖一个排版的“当前状态”,CSS 把这个当前状态称为“格式化上下文(formatting context)”。


我们可以认为排版过程是这样的:


格式化上下文 + 盒/文字 = 位置


formatting context + boxes/charater = positions


我们需要排版的盒,是分为块级盒和行内级盒的,所以排版需要分别为它们规定了块级格式化上下文和行内级格式化上下文。


与正常流一样,如果我们单纯地看格式化上下文,规则其实是非常简单的。


块级格式化上下文顺次排列元素:



行内级格式化上下文顺次排列元素:



注意,块级和行内级元素的排版,受文字书写方向的影响,这里我们讲上下左右只是为了方便你直观理解。


当我们要把正常流中的一个盒或者文字排版,需要分成三种情况处理。


  • 一、当遇到块级盒:排入块级格式化上下文。

  • 二、当遇到行内级盒或者文字:首先尝试排入行内级格式化上下文,如果排不下,那么创建一个行盒,先将行盒排版(行盒是块级,所以到第一种情况),行盒会创建一个行内级格式化上下文。

  • 三、遇到 float 盒:把盒的顶部跟当前行内级上下文上边缘对齐,然后根据 float 的方向把盒的对应边缘对到块级格式化上下文的边缘,之后重排当前行盒。


我们以上讲的都是一个块级格式化上下文中的排版规则,实际上,页面中的布局没有那么简单,一些元素会在其内部创建新的块级格式化上下文,这些元素有:


  • 浮动元素;

  • 绝对定位元素;

  • 非块级但仍能包含块级元素的容器(如 inline-blocks, table-cells, table-captions);

  • 块级的能包含块级元素的容器,且属性 overflow 不为 visible。


这里的最后一条比较绕,实际上,我个人喜欢用另一种思路去理解它:


自身为块级,且 overflow 为 visible 的块级元素容器,它的块级格式化上下文和外部的块级格式化上下文发生了融合,也就是说,如果不考虑盒模型相关的属性,这样的元素从排版的角度就好像根本不存在。


好了,到这里我们已经讲完了正常流的排版详细规则,但是理解规则仅仅是基础,我们还需要掌握一些技巧。我在《重学前端》的第24讲,对正常流的使用技巧,给出了详细的解答。


拓展阅读:


JavaScript词法:为什么12.toString会报错?


一个浏览器是如何工作的?


2019-04-17 15:494255

评论

发布
暂无评论
发现更多内容

Digital Realty 在日本 NRT 园区设立第二座数据中心

财见

汽车软件市场迅猛扩张,Perforce Helix Core与Helix IPLM助力汽车软件开发的版本控制及IP生命周期管理

龙智—DevSecOps解决方案

汽车 汽车软件

IT外包的三大优势对企业的发展有何影响?

Ogcloud

IT IT外包 IT外包公司 IT外包服务 IT外包企业

macos big sur 软件icons图标大全(新增至2719枚大苏尔风格图标)

Rose

macOS Big Sur icons图标

人工智能测试开发训练营 带你快速掌握AI测试开发技能,获得更好的职业机会和晋升空间

测吧(北京)科技有限公司

测试

软件测试学习笔记丨接口测试面试题

测试人

软件测试 面试题 测试开发

Touch bar pet for Mac(在macbook上养一只宠物)

Rose

Mac软件 电子宠物 touchbar 宠物桌面

2 月 Web3 游戏行业动态

Footprint Analytics

blockchain

云游戏平台塑造游戏发行商商业新格局

Ogcloud

游戏 云游戏 游戏发行 云游戏发行 云游戏平台

深耕版本控制、代码质量与安全等领域,龙智荣获“Perforce 2023年度合作伙伴”奖项

龙智—DevSecOps解决方案

版本控制

面试官:说说线程池的工作原理?

王磊

Java 面试

云游戏发行是什么?云游戏发行的演进历程

Ogcloud

游戏 云游戏 游戏发行 游戏云化 游戏发行公司

企业云服务器免费使用后会存在哪些隐患?

一只扑棱蛾子

云服务器 企业云服务器

Maple 2024 mac下载(含maple注册文件及破解工具)兼容m芯片

Rose

软件下载 Maple 2024 Maple数学软件 Maple 2024 mac破解

AutoCAD 2019(cad2019)汉化激活版下载附cad产品密钥

Rose

cad2019 AutoCAD 2019

大咖公开课 | 探索AI的边界:如何精准地测试人工智能

测吧(北京)科技有限公司

测试

IBM 宣布在 watsonx 上提供开源的 Mistral AI 模型

财见

客户说|从4小时到15分钟,一次分布式数据库的丝滑体验

阿里云数据库开源

阿里云 运维 polarDB PolarDB-X 识货

如何避免MYSQL主从延迟带来的读写问题?

不在线第一只蜗牛

MySQL

龙智携全方位芯片解决方案亮相IIC Shanghai 2024,助力客户解决复杂的芯片研发挑战

龙智—DevSecOps解决方案

芯片开发 芯片研发

AI+办公!5款超实用AI软件,一键生成PPT、视频、思维导图等!

彭宏豪95

人工智能 在线白板 AIGC 效率软件 AI生成PPT

毫末贺翔:DriveGPT让通用感知实现“万物识别”、通用认知具备“世界知识”

极客天地

Pandora飙升背后的ERC404 目前适合布局吗

区块链软件开发推广运营

dapp开发 区块链开发 链游开发 NFT开发 公链开发

pd18虚拟机如何安装?哪里有Parallels 工具箱?

Rose

PD18虚拟机破解 Parallels 工具箱 Mac虚拟机安装 Parallels Desktop破解

关于CSS排版,其实从毕升开始,我们就开始用正常流了_大前端_程劭非_InfoQ精选文章