摘要：简单来说就是所有未包含在行内元素中的字符串。在行内替换元素中，内容区是元素的固有高度再加上可能有的外边距边框和内边框。行内框是可见的。
案发
1.这些文字是如何摆放这么整齐的？为什么这个庞然大物的底部能对齐，顶部没对齐？为什么第二行与第一行的间距那么大？
2.为什么光秃秃的p标签没有高度，为什么在p标签中写入文字就有高度了呢？真的是因为文字大小撑起来的吗？
取证vertical-align是主谋之一，使得庞然大物的底部对齐
line-height是另一主谋，导致顶部没对齐以及巨大间距和p高度
匿名文本、em框，font-size,内容区，行间距,行内框，行框，行内非替换元素间接或直接参与了犯罪
分析场景回顾
This is the content of the element p. Here is inline element. I am glad that you come to read here.I hope that
you can learn more from here. So just code, it"s a great things. Let"s go!!!.
身份鉴定
匿名文本：英文名anonymous text。简单来说就是所有未包含在行内元素中的字符串。比如说案发现场的This is the......I hope that
em框：别名字符框(character box)。em框在字体中定义。em框在css中不可见，是一个比较抽象的概念。这里只需要知道font-size确定了各个em框高度即可
font-size：字体大小，与em框有关
内容区：在行内非替换元素中，内容区是元素中各个字符的em框串在一起构成的框。在行内替换元素中，内容区是元素的固有高度再加上可能有的外边距、边框和内边框。
行间距：line-height与font-size之差，这个差分为两半，分别应用到内容区的顶部和底部。行间距只适用于行内非替换元素。
行内框：这个框通过向内容区增加行间距来描述。对于非替换元素，元素行内框的高度刚好等于line-height的值。对于替换元素，元素行内框的高度恰好等于内容区的高度，因为行间距。
行框：这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行内框的上边界，而行框的底边要放在最低行内框的下边界。
非替换元素：如果元素的内容包含在文档中，则称之为非替换元素。比如说
Inner content
或Inner content
替换元素：用作为其他内容占位符的一个元素。比如说
或者
重要提示：为了便于接下来的分析过程，请先了解他们的身份，然后带着疑问去参与分析。
模拟作案首先是字体创建，该过程伴随着em框的生成，这个框是不可见的。开发人员无法控制该框大小。
每一个字符的产生都代表em框的生成。（那么这些字符是如何摆放的？为什么是浏览器呈现给我们的样式？人们写字的时候总是不经意间会写歪，那么浏览器又是如何做到对齐）
所有字符都全部action后，em框连在一起形成了内容区。这个区域依然不可见，很抽象。开发者无法直接控制，只能通过font-size间接影响em框从而影响内容区的大小。大多数情况下可以认为font-size大小即为内容区大小。
内容区生成后，行内框也即将生成。这个时候，行间距吵闹着要把自己分成两半，一半放在内容区的头上，另一半下放在内容的底部，这样才显得恩爱嘛。
当爱情发生后总会产生些什么。于是行内框就诞生了，内容区和行间距的完美组合就是行内框。行内框是可见的。
所有的行内框都出生后，就得按照一定的规则制造一个包容它们的容器了，这就是行框。既然要包含它们，那必然得照顾最高和最矮的那个了。
以上是一般案例的发生，图解如下
代码如下：
This is the content of the element p. Here is inline element. I am glad that you come to read here.I hope that
you can learn more from here . So just code, it"s a great things. Let"s go!!!.
黄色和蓝色区域代表内容区（在这同时也表示行内框），但如果line-height与font-size大小不一时，使用background添加颜色时，作用的是内容区(content)。
温馨提示：思考时可以先考虑这一行中有哪些元素，再参照上述过程进行模拟。
案件实战有了以上的基础后，这里便开始对两个案件合并进行透彻的剖析（因为问题牵扯的本质是一样的）。
代码重温：
This is the content of the element p. Here is inline element. I am glad that you come to read here.I hope that
you can learn more from here. So just code, it"s a great things. Let"s go!!!.
效果重温：
问题重温：匿名文本和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。。。呜呜
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111277.html
摘要：此元素将显示为块级元素，此元素前后会带有换行符。新增的值此元素会作为列表显示。块级元素和行内元素的分类中的块级元素标签描述定义地址。定义围绕表单中元素的边框。定义预定义范围内的度量。定义针对不支持框架的用户的替代内容。定义表格中的单元。 标签（空格分隔）： CSS 在html中元素主要分为行内元素和块级元素 行内元素 [x] 不独占一行 [x] 书写完成后不会自动换行 [x] 没...
摘要：此元素将显示为块级元素，此元素前后会带有换行符。新增的值此元素会作为列表显示。块级元素和行内元素的分类中的块级元素标签描述定义地址。定义围绕表单中元素的边框。定义预定义范围内的度量。定义针对不支持框架的用户的替代内容。定义表格中的单元。 标签（空格分隔）： CSS 在html中元素主要分为行内元素和块级元素 行内元素 [x] 不独占一行 [x] 书写完成后不会自动换行 [x] 没...
摘要：浮动元素会从文档的正常流简称文档流中脱离，但仍会影响布局。五清除浮动和中对工作是这样描述的增加元素的上外边距，使之最后落在浮动元素的下面。清除区域时在元素的上外边距增加的额外间隔，不允许任何浮动元素进入这个范围内。 内容预览 包含块 浮动元素的特性 浮动元素的摆放规则 浮动元素的几种行为 清除浮动 一、包含块 所有元素的布局都是依赖于包含块的。 举个例子来说 ...
摘要：部分样式代码总结因为用的不多其他对齐方式并没有举例。 起因 内容垂直居中在前端布局中, 是经常遇到的需求。虽然可以用 浮动 float、position:absolute、 来解决, 不过文档流都会受到影响。笔者常用的是 flex, 用起来顺手, 有些地方用起来感觉小题大做, 于是就来探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
摘要：部分样式代码总结因为用的不多其他对齐方式并没有举例。 起因 内容垂直居中在前端布局中, 是经常遇到的需求。虽然可以用 浮动 float、position:absolute、 来解决, 不过文档流都会受到影响。笔者常用的是 flex, 用起来顺手, 有些地方用起来感觉小题大做, 于是就来探究一下 vertical-align 如何做到居中布局。 初探 要明白 vertical-align...
阅读 1923·2019-08-30 15:52
阅读 2808·2019-08-29 16:09
阅读 1228·2019-08-28 18:30
阅读 2344·2019-08-26 12:24
阅读 920·2019-08-26 12:12
阅读 2166·2019-08-26 10:45
阅读 474·2019-08-23 17:52
阅读 629·2019-08-23 16:03
