⑴ 基线
- 基线
- 沿着 文本最底部的 一行线, 基线(base line)并不只是 汉字文字的下端沿
- 若一行文本 有中文和英文,则基线会在 英文 ‘
x
’ 最底部。
- 若一行文本 有中文和英文,则基线会在 英文 ‘
- 沿着 文本最底部的 一行线, 基线(base line)并不只是 汉字文字的下端沿
-
行高、基线、顶线、中线、底线 示例图
- 元素框
- 每个元素 都会生成 一个或多个 矩形框,这称为 元素框。
⑵ 内容区
- 内容区
- 指 底线 和 顶线 包裹的区域
- (行内元素
display:inline
可以通过background-color
属性显示出来)- 各元素框中心 有一个 内容区,这个内容区 周围有 可选的内边距、边框和外边距。
- 实际中 不一定看得到,但确实存在。
- 内容区的大小: 根据 字体大小
font-size
的值 和字数 进行变化。- 对于 行内 非替换元素 或 匿名文本 某一部分
-
内容区的 高度:
- 字体大小
font-size
值 确定了 内容区的高度。- 如果一个 行内元素
font-size:15px
,则 内容区的高度 =15px
。
- 如果一个 行内元素
- 内容区 就是一个框,而 每一个文字 都有它的
em
框(em
框 确定 内容区高度)。
- 字体大小
-
- 对于 行内 非替换元素 或 匿名文本 某一部分
⑶ 行高/行间距
- 行高/行间距(
line-height
):- 包括 内容区 和 以内容区为基础 对称拓展的 空白区域,我们称之为 行高。
- 一般情况下,也可以认为是
- 相邻文本行 基线到基线 的 距离,中线到中线 的距离.(一个线,到另一个相邻行 相同的线,都是行高.)
- 所以,很显然,内容区,一般是小于 行高/行间距的.
- (区分 行间距和行距)
- 元素居中时的行高: 让元素在指定区域内 上下居中: 行高 = 行距+
font-size
; - 行高和字体大小: 行高
line-height
< 字体大小font-size
时, 将出现 行距为负数的情况,也就是两行文字 将部分重合。
⑷ 行距
- 行距:指相邻文本行间
- 上一个文本行底线 和 下一文本行顶线之间的距离。
- 行距 = 上行底线和下行顶线 之间的距离 (= 两个内容区之间的距离)
- 行距 = 行高
line-height
- 字体尺寸font-size
(=内容区高度=顶线和底线之间的距离)- = 行高和字体尺寸的 差值 = (上文本行的 行高-内容区高度)/2+(下文本行的 行高-内容区高度)/2。
- 行距的分布: 将行距的值 / 2,分别增加到 内容区域的 上下两边。
⑸ 行内框
- 行内框:
- 行内框 是一个 虚拟的 矩形框,无法 在页面中 显示出来。
- 行内框 = 行高 = 字体大小(内容区)
font-size
+行距- 调整 行内框间距: 可以使用 水平内边距、边框和外边距 调整它们的间距。
- 但是,垂直内边距、边框和外边距 不影响 行内框的高度。
- 调整 行内框间距: 可以使用 水平内边距、边框和外边距 调整它们的间距。
- 行高≠ 行内框的 情况
- 图片 和 行框,行高:
- 高度大于行高的图片 会把行框 撑开
- 此时,虽然 撑开了行框,却 不会影响 行高。
- 图文的垂直对齐: 当行内 含有图片的时候,图片 和 文字的 垂直对齐方式 默认是 基线对齐.
- 图片 和 行框,行高:
⑹ 行框
- 行框
- 虚拟的矩形框: 指本行的 一个 虚拟的矩形框,是 浏览器渲染模式中 的一个概念,并没有 实际显示。
- 行框高度 等于本行内 所有元素中 行内框最大的值。
- 一行 一个行框: 当有 多行内容时,每行 都会有 自己的行框。
- 不同高度的 行内框: 一行文本中 会有 不同大小的文字,这就造成了 一行文本中有 不同高度的 行内框,见上图。
- 行框 = 一行文本中 最高行内框的顶端 到 最低行内框的低端 之间的距离 = 所有行高中的最大值
- 行框的高度 总是 足以容纳 它包含的 所有行内框。设置行高 可以增加 这个行框的高度。
- 并且 下一行的 行框的顶端 挨着 上一行 行框的底端
- 行框的高度 总是 足以容纳 它包含的 所有行内框。设置行高 可以增加 这个行框的高度。
- 行内框的高度 决定了 行框高度
- 行高的影响: 对行内框和行框,都是有影响的.
- 虚拟的矩形框: 指本行的 一个 虚拟的矩形框,是 浏览器渲染模式中 的一个概念,并没有 实际显示。
♣ 结束语 和 友情链接
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭
- 转载 请注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:CSDN
- 原文:https://blog.csdn.net/VickyTsai/article/details/103000077
- 版权声明:本文为博主原创文章,转载请附上博文链接!