摘要:浏览器最基本的排版方案是正常流排版。元素非常特别,浏览器对的处理是先排入正常流,再移动到排版宽度的最左最右主轴的最前和最后。浏览器支持的每一种排版方式,都是按照对应的标准来实现的。
笔记说明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。一、概括
本文主要聊聊浏览器是怎样确定每一个元素的位置的二、基本概念 2.1、排版
浏览器把排版的内容(文字、图片、图形、表格等等)确定它们位置的过程,叫作排版。浏览器最基本的排版方案是正常流排版。2.2、盒模型
浏览器又可以支持元素和文字的混排(元素被定义为占据长方形的区域),还允许边框、边距和留白,这个就是所谓的盒模型。2.2.1、绝对定位元素
绝对定位元素把自身从正常流抽出,直接由 top 和 left 等属性确定自身的位置,不参加排版计算,也不影响其它元素。完全跟正常流无关的一种独立排版模式。2.2.2、浮动元素
浮动元素则是使得自己在正常流的位置向左或者向右移动到边界,并且占据一块排版空间。 float 元素非常特别,浏览器对 float 的处理是先排入正常流,再移动到排版宽度的最左 / 最右(主轴的最前和最后)。三、正常流文字排版 3.1、字体解析库(freetype)
来自freetype的两张图片关于获取某个特定的文字相关信息:
纵向版本:
advance:每一个文字排布后在主轴上的前进距离。
3.2、css属性影响除了字体提供的字形本身包含的信息,文字排版还受到一些 CSS 属性影响,如 line-height、letter-spacing、word-spacing 等。display 值为 inline 的元素中的文字排版时会被直接排入文字流中,inline 元素主轴方向的 margin 属性和 border 属性也会被计算进排版前进距离当中。
即使没有元素包裹,混合书写方向的文字也可以形成一个盒结构,在排版时,遇到这样的双向文字盒,会先排完盒内再排盒外。
四、正常流中的盒多数 display 属性都可以分成两部分:内部的排版和是否 inline,带有 inline- 前缀的盒,被称作行内级盒。
vertical-align 属性决定了盒在交叉轴方向的位置,也会影响实际行高。
浏览器对行的排版,一般是先行内布局,再确定行的位置,根据行的位置计算出行内盒和文字的排版位置。
块级盒比较简单,它总是多带带占据一整行,计算出交叉轴方向的高度即可。
五、其他排版比如: flex 排版,支持了 flex 属性,flex 属性将每一行排版后的剩余空间平均分配给主轴方向的 width/height 属性。
浏览器支持的每一种排版方式,都是按照对应的标准来实现的。
个人总结大漠老师在这篇文章下留言说:“文档流和排版是最难的部分!”
看来下次要看看flex的一些东西了。。。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114621.html
摘要:浏览器最基本的排版方案是正常流排版。元素非常特别,浏览器对的处理是先排入正常流,再移动到排版宽度的最左最右主轴的最前和最后。浏览器支持的每一种排版方式,都是按照对应的标准来实现的。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习...
摘要:浏览器最基本的排版方案是正常流排版。元素非常特别,浏览器对的处理是先排入正常流,再移动到排版宽度的最左最右主轴的最前和最后。浏览器支持的每一种排版方式,都是按照对应的标准来实现的。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习...
摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...
摘要:二标签超链接型标签超链接型标签是一种被动型链接。四标签与标签非常相似,不同的是,它不是文本型的链接,而是区域型的链接。是整个规则中唯一支持非矩形热区的标签。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语...
阅读 1339·2021-11-16 11:44
阅读 3253·2021-09-29 09:43
阅读 593·2019-08-30 10:52
阅读 894·2019-08-29 11:01
阅读 3228·2019-08-26 11:47
阅读 2837·2019-08-23 12:18
阅读 1329·2019-08-22 17:04
阅读 2016·2019-08-21 17:04