浏览器：一个浏览器是如何工作的？（阶段四）
winter
该思维导图由 AI 生成，仅供参考
你好，我是 winter。
我们书接上文。浏览器进行到这一步，我们已经给 DOM 元素添加了用于展现的 CSS 属性，接下来，浏览器的工作就是确定每一个元素的位置了。我们的基本原则仍然不变，就是尽可能流式地处理上一步骤的输出。
在构建 DOM 树和计算 CSS 属性这两个步骤，我们的产出都是一个一个的元素，但是在排版这个步骤中，有些情况下，我们就没法做到这样了。
尤其是表格相关排版、Flex 排版和 Grid 排版，它们有一个显著的特点，那就是子元素之间具有关联性。
基本概念
首先我们先来介绍一些基本概念，使你可以感性地认识一下我们平常说的各种术语。
“排版”这个概念最初来自活字印刷，是指我们把一个一个的铅字根据文章顺序，放入板框当中的步骤，排版的意思是确定每一个字的位置。
在现代浏览器中，仍然借用了这个概念，但是排版的内容更加复杂，包括文字、图片、图形、表格等等，我们把浏览器确定它们位置的过程，叫作排版。
浏览器最基本的排版方案是正常流排版，它包含了顺次排布和折行等规则，这是一个跟我们提到的印刷排版类似的排版方案，也跟我们平时书写文字的方式一致，所以我们把它叫做正常流。
浏览器的文字排版遵循公认的文字排版规范，文字排版是一个复杂的系统，它规定了行模型和文字在行模型中的排布。行模型规定了行顶、行底、文字区域、基线等对齐方式。（你还记得小时候写英语的英语本吗？英语本上的四条线就是一个简单的行模型。）
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
浏览器排版是浏览器渲染页面的重要步骤之一。在排版阶段，浏览器确定每个元素的位置，包括文字、图片、图形和表格等。排版的基本概念源自活字印刷，而现代浏览器的排版内容更加复杂。浏览器支持不同语言的书写顺序和双向文字系统，同时还支持元素和文字的混排，采用盒模型进行排版。正常流排版是最基本的排版方式，文字排版遵循公认的文字排版规范，而在正常流中的盒则遵循盒模型。此外，浏览器还支持绝对定位元素和浮动元素排版，以及其他排版方式如Flex排版。总的来说，本文介绍了浏览器排版的基本概念及一些算法，包括正常流中的文字排版、正常流中的盒、绝对定位元素、浮动元素排版等。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59
《重学前端》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(40)
- 最新
- 精选
大漠文档流和排版是最难的部分！作者回复: 对大漠老师来说小菜一碟 哈哈哈
2019-02-18450
捉迷藏的铁人最喜欢flex布局，感觉几乎都可以用它来实战！作者回复: 淘宝用weex开发，就只有flex布局。
2019-02-176
soulful希望讲完这部分浏览器工作原理后，能给一个简单的demo实例一节课，把前面的贯通一下，加深理解。作者回复: 我想把这部分留给你们 我写没用啊
2019-02-185
费马最喜欢使用flex布局，但是工作中页免不了要使用定位和浮动来实现特殊定位，所以对不同排版之间的关系及相互作用不太清楚，老师可不可以讲讲作者回复: 使用定位和浮动没有问题。 不同排版间的关系这个就复杂了，我觉得遵守可以内外嵌套、但是不混用的规则即可。
2019-02-163
William双向文字盒，行内级盒两个概念，老师会在css部分详细讲一下吗？作者回复: 行内级盒会详细介绍，双向文字这个不会，毕竟用到太少啦。
2019-02-161
霍光传不可不读flex怎么实现如下布局呢？ 盒子1 间隙1 盒子1 间隙1 盒子1 盒子1 间隙1 盒子2 （其中，盒子2的宽度等于两个盒子1加上间隙1的宽度和）作者回复: 这个flex实现不了，只能自己用margin做
2019-07-264
靠人品去赢这节我可以理解为正常流的排版方式，里面的文字元素的排版，盒元素的排版，以及定义为绝对元素，浮动元素的排版。 顺便提了一嘴flex排版方式（我的理解是针对浏览器，是和正常流一样级别的，一个是按照我们常见的印刷排版，还有一种是直接针对这个浏览器做一个大大的flex的排版方式。） 希望大家能给出相关意见，我的理解是不是对的有没有不准确的。作者回复: 你理解的是对的，除了flex，还有table、grid等很多排版方式，我们这里就不一一讲啦。
2019-02-27
レイン小雨想问一下老师说的‘流式处理’ 是怎样的一种模型？我脑海中浮现的样子就像是车间流水线式的工作方式，但这不就是同步阻塞的工作方式吗，一个零件的加工步骤是一步一步来的啊，上一个步骤不加工完，流程就到不了你这里来，你就不能进行第二部加工啊。作者回复: 流式处理嘛，是水流的意思，所以并行程度取决于零件的粒度，零件越小，并行度就越高。
2019-02-182
文刀帅希望老师多讲讲闭包的问题作者回复: 后面有讲
2019-02-18- rhodamine以前做的项目里涉及过文章复杂嵌套表格的展示问题，至今似乎都没有发现web上有更好的解决方案，大部分是table实现的简单表格或是图片形式。当时也只是采用了图片的形式，后面改成svg的形式。不知道未来在web出版上会不会有改进。
作者回复: 听上去grid布局可以解决。
2019-02-16
收起评论