首页
学习
活动
专区
工具
TVP
发布

(8)CSS 基本视觉格式化——②“行内盒子”格式化

本知识学习用时:2小时,总第40/10000小时

前言:作为学习“基本视觉格式化”的第二篇,“行内盒子”格式化相对于“块盒子”格式化的知识点会更细、更分散。不过作为最基本的理论知识,这篇依然很重要。

一、“行内盒子”怎么来的

当元素的 display 属性为inline、inline-block或inline-table时,该元素将成为“行内级元素”。

这些元素不会在之前或之后生成“行分隔符”,它们是块级元素的后代。

显示时,它不会生成内容块,但是可以与其他行内级内容一起显示为多行。

同理,“行内级元素”会生成“行内级盒子”,该盒子同时会参与“行内格式化上下文(inline formatting context)”的创建。

二、“行内盒子”格式化

① 一些基本概念

匿名文本

未包含在行内元素的字符串(生活不像林黛玉 而风情万种)就叫“匿名文本”。

注意,空格也是匿名文本的一部分,因为空格与其他字符一样都是正常的字符。

非替换元素、替换元素

-- 非替换元素:

如果元素的内容包含在文档中,则称之为“非替换元素”。

例如:如果一个段落的文本内容都放在该元素的本身之内,这个段落就是一个“非替换元素”。

-- 替换元素:

指用作为其他内容占位符的一个元素。

例如:-- img 元素,它只是指向一个图像文件,这个图像文件将插入到文档流中该 img 元素本身所在的位置。

大多数“表单”元素也可以“替换”(如 )。

内容区、行内框、间距

-- 内容区

非替换元素中,内容区可以是元素中各字符的 em 框串在一起构成的框(font-size 的值确定了各个 em 框的高度),也可以是由元素中字符字形描述的框;

替换元素中,内容区就是元素的固有高度再加上可能有的 margin、边框或 padding。

-- 行间距

行间距是 font-size 与 line-height 的差值,被分成两半在内容区的上下(上下半间距)。

行间距只应用于非替换元素。

-- 行内框

非替换元素,行内框高度= line-height ;

替换元素,行内框高度=内容区宽度(因为行间距不应用到替换元素)。

-- 行高

两行文字“基线”的距离。

-- 行框

一行有很多“行内框”,“行框”是包含该行中出现的“行内框”的最高点和最低点的最小框。

换句话说,“行框”的上边界要位于最高“行内框”的上边界,而“行框”的底边要放在最低“行内框”的下边界。

-- 基线

不同元素的“基线”位置不同,整个“行框”会有一个“基线”,行内元素的位置是基于两者“基线”对齐。

② “行内盒子”格式化——核心:确定“行框”的高度

-- 首先,以下步骤确定行中各元素“行内框”的高度:

第一,得到各行内“非替换元素”及不属于后代行内元素的所有文本的 font-size 值和 line-height 值,再将 line-height 减去 font-size,这就得到了框的“行间距”。这个“行间距”除以 2,将其一半分别应用到 “em 框”的顶部和底部。

-- 其次,对于各内容区,确定它在整行“基线”的上方和下方分别超出多少:

这个任务并不容易:你必须知道各元素及匿名文本各部分的“基线”的位置, 还要知道该行本身“基线”的位置,然后把它们对齐。另外,对于替换元素,要将其底边放在整行的“基线”上。

-- 继而,对于指定了 vertical-align 值的元素,确定其垂直偏移量:

由此可知该元素的“行内框”要向上或向下移动多远,并改变元素在“基线”上方或下方超出的距离。

-- 最后,既然已经知道了所有“行内框”会放在哪里,再来计算最后的“行框”高度:

为此,只需将“基线”与最高“行内框”顶端之间的距离加上“基线”与最低“行内框”底端之间的距离。

后记:之所以在这里打住没往下写,主要是考虑到上篇和这篇的理论知识实在是太多。且后续的文章(如“CSS 给链接加样式”、“CSS 给表单加样式”等)将会着重涉及“行内盒子”在实例中的运用,届时我们将会用代码来阐述基础理论,眼下不作过多赘述。

记住一点:理论不懂就实践,实践不会就学理论!

欢迎继续关注下文 :

(9)CSS 单纯给“盒子”加样式——padding、border、margin

(本文版权归 “公号 | Oli的前端一万小时” 所有,转载需说明来源)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180609G1MESO00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券