从零基础到轻松就业 | CSS——CSS 基本视觉格式化：② “行内盒子”格式化（ Ⅲ ）

时间 2020-01-15

原文原文链接

原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归做者全部，未经受权，请勿转载！
复制代码

首先，如下步骤肯定文本行中各元素对应的“行内盒子”的高度：html
- 第一，获得各行内“非替换元素”及不属于后代行内元素的全部文本的 font-size 值和 line-height 值，再将 line-height 减去 font-size，这就获得了框的“行间距”。这个“行间距”除以 2，将其一半分别应用到 “em 框”的顶部和底部；前端
- 第二，获得各“替换元素”的 height、margin-top、margin-bottom，padding-top、 padding-bottom、border-top-width 和 border-bottom-width 值，把它们加在一块儿。浏览器
其次，对于各内容区，肯定它在整行“基线”的上方和下方分别超出多少：
这个任务并不容易：你必须知道各元素及匿名文本各部分的“基线”的位置，还要知道该行自己“基线”的位置，而后把它们对齐。另外，对于替换元素，要将其底边放在整行的“基线”上。bash
继而，对于指定了 vertical-align 值的元素，肯定其垂直偏移量：
由此可知该元素的“行内盒子”要向上或向下移动多远，并改变元素在“基线”上方或下方超出的距离。post
最后，既然已经知道了全部“行内盒子”会放在哪里，再来计算最后的“行内盒子”——行框的高度：
为此，只需将“基线”与最高“行内框”顶端之间的距离加上“基线”与最低“行内框”底端之间的距离。字体

答：
line-height: 2; 和 line-height: 200%; 都表示行高是字体大小的 2 倍，可是它们是有区别的。spa

当它们写在父容器中时，子元素的字体大小不同的时候，区别就体现出来了：3d

line-height: 2; 写在父容器中，那么子元素的行高都是自身高度的 2 倍，是相对大小。子元素的字体大小不一样，行高也会不一样。code
line-height: 200%; 写在父容器中，那么浏览器会马上计算出行高的具体值，假如父容器的默认字体大小16px，那么计算获得的行高就是 2×16px=32px，子元素的行高都会继承这个 32px，是固定大小。子元素的字体大小不一样，行高都是固定某个值。

答：
对于行内元素来讲，上下的 margin padding 不生效，只有左右的 margin padding 生效！

上下 padding 只是撑开了边框，对高度是没有影响的。你对他加一些边框和背景色，他也能够看获得变化，但实质上对高度没有影响。

因此，行内元素的“边框”、“边界”是由 font-size 而不是 line-height 控制。

答：是的。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>前端一万小时</title>
</head>
<body>
  <p>Hello，Oli 的前端一万小时</p>
</body>
</html>
复制代码

CSS

p {
  width: 300px; 
  border: 1px solid blue;
  height: 50px;
  line-height: 50px;
}
复制代码

下一篇咱们继续讲解 CSS“行内盒子”格式化相关的知识点。

祝好，qdywxs ♥ you！