行内元素的一些探究

时间 2019-11-07

标签元素一些探究繁體版

原文原文链接

案发

1.这些文字是如何摆放这么整齐的？为何这个庞然大物的底部能对齐，顶部没对齐？为何第二行与第一行的间距那么大？css

2.为何光秃秃的p标签没有高度，为何在p标签中写入文字就有高度了呢？真的是由于文字大小撑起来的吗？浏览器

取证

vertical-align是主谋之一，使得庞然大物的底部对齐字体
line-height是另外一主谋，致使顶部没对齐以及巨大间距和p高度spa
匿名文本、em框，font-size,内容区，行间距,行内框，行框，行内非替换元素间接或直接参与了犯罪设计

分析

场景回顾3d

<body style="padding:0 400px;border:1px solid #000">
    <p style="font-size:16px;line-height:16px;">
        This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
        <strong style="font-size:40px;">you</strong> can learn more from here. So  just code, it's a great things. Let's go!!!.
    </p>
</body>

身份鉴定

匿名文本：英文名anonymous text。简单来讲就是全部未包含在行内元素中的字符串。好比说案发现场的This is the......I hope that代理
em框：别名字符框(character box)。em框在字体中定义。em框在css中不可见，是一个比较抽象的概念。这里只须要知道font-size肯定了各个em框高度便可code
font-size：字体大小，与em框有关blog
内容区：在行内非替换元素中，内容区是元素中各个字符的em框串在一块儿构成的框。在行内替换元素中，内容区是元素的固有高度再加上可能有的外边距、边框和内边框。ip
行间距：line-height与font-size之差，这个差分为两半，分别应用到内容区的顶部和底部。行间距只适用于行内非替换元素。
行内框：这个框经过向内容区增长行间距来描述。对于非替换元素，元素行内框的高度恰好等于line-height的值。对于替换元素，元素行内框的高度刚好等于内容区的高度，由于行间距。
行框：这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。
非替换元素：若是元素的内容包含在文档中，则称之为非替换元素。好比说
```
<p>Inner content</p>或<div>Inner content</div>
```
替换元素：用做为其余内容占位符的一个元素。好比说
```
<img src="test.gif" />或者<input type="radio" />
```

重要提示：为了便于接下来的分析过程，请先了解他们的身份，而后带着疑问去参与分析。

模拟做案

首先是字体建立，该过程伴随着em框的生成，这个框是不可见的。开发人员没法控制该框大小。
每个字符的产生都表明em框的生成。（那么这些字符是如何摆放的？为何是浏览器呈现给咱们的样式？人们写字的时候老是不经意间会写歪，那么浏览器又是如何作到对齐）
全部字符都所有action后，em框连在一块儿造成了内容区。这个区域依然不可见，很抽象。开发者没法直接控制，只能经过font-size间接影响em框从而影响内容区的大小。大多数状况下能够认为font-size大小即为内容区大小。
内容区生成后，行内框也即将生成。这个时候，行间距吵闹着要把本身分红两半，一半放在内容区的头上，另外一半下放在内容的底部，这样才显得恩爱嘛。
当爱情发生后总会产生些什么。因而行内框就诞生了，内容区和行间距的完美组合就是行内框。行内框是可见的。
全部的行内框都出生后，就得按照必定的规则制造一个包容它们的容器了，这就是行框。既然要包含它们，那必然得照顾最高和最矮的那个了。

以上是通常案例的发生，图解以下

代码以下：

<body style="padding:0 400px;border:1px solid #000">
    <p style="font-size:16px;line-height:16px;background:#af3;border:1px solid red">
        This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
        <strong style="background:yellow;">you can learn more from here</strong> . So  just <span style="background:blue">code, it's a great things. Let's go!!!.</span>
    </p>
</body>

黄色和蓝色区域表明内容区（在这同时也表示行内框），但若是line-height与font-size大小不一时，使用background添加颜色时，做用的是内容区(content)。

舒适提示：思考时能够先考虑这一行中有哪些元素，再参照上述过程进行模拟。

案件实战

有了以上的基础后，这里便开始对两个案件合并进行透彻的剖析（由于问题牵扯的本质是同样的）。

代码重温：

<body style="padding:0 400px;border:1px solid #000">
        <p style="font-size:16px;line-height:16px;">
            This is the content of the element p. Here is inline element. I am glad that you  come to read here.I hope that 
            <strong style="font-size:40px;">you</strong> can learn more from here. So  just code, it's a great things. Let's go!!!.
        </p>
    </body>

效果重温：

问题重温：匿名文本和strong标签的内容是如何对齐的？line-height都是16px，第二行的间距仍是那么大？

问题解决：首先是对齐的问题，关于行内元素的对齐就不得不提到vertical-align属性

浏览器代理（userAgentStylesheet）给全部行内元素vertical-align的属性默认设置成了baseline。baseline这个属性值要求元素的基线与父元素的基线对齐。

这张图特地放大了

图中红色区域就是基线。css规范中对基线是否有明确规定？这一点我不太清楚。这里讲下我的的理解吧，基线是字符的特有属性，在字体被设计时就被肯定好的。开发者没法控制。

因为userAgentStylesheet默认vertical-align属性值为baseline，因此它们就工整的对齐了。

第二个问题，第二行间距为何如此大？

line-height明明都是16px。

缘由很简单，line-height在应用到块级元素时，它定义的是元素中文本基线之间的最小距离。也就是说这不是一个固定死的数值，只是一个最低要求。

首先p标签是块级元素，其次line-height设置的大小与匿名文本的font-size同样，这致使内容区与行内框大小一致。然而对于strong标签里的文原本说，因为行内框小于内容区的大小，且行内框在内容区垂直居中。

颜色强调

首先，每行的行框顶端是紧靠着上一行行框的底端。正如图中所见，着色区域都是内容区。由于前三行的font-size和line-height大小一致，因此行框便是着色区。可是第四行的内容区并不等于行框大小。

单独审视第四行，这里有两个匿名行内框(hope that 和can learn more)和一个行内元素strong。一共三个行内框，其中匿名行内框的大小等于font-size，而strong标签的行内框却远小于内容区的大小(font-size),因为行间距是对半上下分布的（参考案件模拟里的第四条），因此此时行内框的位置是在内容区是垂直居中的。

strong元素行内框

按照行框的生成过程（案件模拟）来看，这里行框的顶端是由strong元素的行内框顶端肯定，底端则是有匿名文本的行内框的底端肯定。

图中箭头所指即为行高。

至此，已经解决了对齐和为何第二行间距如此大的问题。

当p标签中没有任何内容时，p的高度为0.当p中随意写入文本时，p会生成一个高度。这并非被文本撑起来的，而是行框、行内框的做用。注意，一般状况下line-height有个默认值1.2。
这里就不细讲了，能够当作思考题，但愿对各位有帮助。

个人第一次给了segmentFault。。。呜呜