红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

关于 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:494018

评论

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

左耳听风 - 软件开发与架构设计的原则「读书打卡 day 13」

Java 工程师蔡姬

读书笔记 程序员 个人成长 职业发展

运营商大模型,数字中国的一枚“落子”

脑极体

AI 大模型

OpenKruiseGame × KubeSphere 联合发布游戏服运维控制台,推动云原生游戏落地

阿里巴巴云原生

阿里云 开源 容器 云原生

解读 EventBridge Transform:数据转换和处理的灵活能力

阿里巴巴云原生

阿里云 云原生

影视行业使用云电脑能有哪些好处?云电脑有什么优势

青椒云云电脑

云桌面 云电脑 云电脑平台

定向减免!函数计算让轻量 ETL 数据加工更简单,更省钱

阿里巴巴云原生

阿里云 云原生 函数计算

Consul 留给你的时间不多了

阿里巴巴云原生

阿里云 云原生

云原生离线工作流编排利器 -- 分布式工作流 Argo 集群

阿里巴巴云原生

阿里云 云原生

从0到1:大学校园参观预约小程序开发笔记(一)

CC同学

强大的日志权限管理:多索引与访问规则的创新应用

观测云

日志 数据安全

活动回顾丨云原生技术实践营上海站「云原生 AI &大数据」专场(附 PPT)

阿里巴巴云原生

阿里云 容器 云原生

进击的 Serverless:Java 应用如何从容地面对突增流量

阿里巴巴云原生

阿里云 Serverless 云原生

KubeBlocks 研发轶事之 addon 抽象

小猿姐

数据库 Kubernetes 云原生 抽象

Sentinel 新版本发布,提升配置灵活性以及可观测配套

阿里巴巴云原生

阿里云 开源 云原生

从 13 个企业关心的问题看懂用云范式的改变

阿里巴巴云原生

阿里云 云原生 云原生容器

php几种常用的加密解密算法

百度搜索:蓝易云

php 云计算 Linux 运维 云服务器

docker搭建nginx教程

百度搜索:蓝易云

nginx Docker Linux 运维 云服务器

SponsorBlock for YouTube for Mac(跳过youtube赞助商广告)v5.5.2激活版

影影绰绰一往直前

玩转数据处理利器:学会使用 YAML 文件轻松处理数据

测试人

软件测试 测试开发

笔记软件哪个好?超全的笔记软件盘点推荐:手写笔记、文本笔记、协作笔记、知识管理等!

彭宏豪95

效率工具 在线白板 办公软件 笔记软件 boardmix

成本更低、更可控,云原生可观测新计费模式正式上线

阿里巴巴云原生

阿里云 云原生 可观测

C# 循环与条件语句详解

小万哥

C# 程序人生 编程语言 软件工程 后端开发

「回看 Milvus 的 2023」:AI 热潮中的非典型向量数据库

Zilliz

Milvus 大模型 AIGC 向量数据库

聚道云连接器实现航信与用友NC凭证对接,助力企业实现数字化转型

聚道云软件连接器

案例分享

《Java性能权威指南(第2版)》PDF

程序员李木子

【运维】GitLab相关配置优化等

百度搜索:蓝易云

云计算 Linux gitlab 运维 云服务器

Jira 私有化部署即将停服,你准备好了吗?

极狐GitLab

项目管理中有效沟通的7大技巧

PingCode

项目管理 项目经理 沟通技巧

Sketch for mac(专业矢量绘图设计软件)v99.5中文激活版

影影绰绰一往直前

走出大模型部署新手村!小明这样用魔搭×函数计算

阿里巴巴云原生

阿里云 云原生 函数计算

《数据结构与算法分析:Java语言描述(第3版)》PDF

程序员李木子

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