line-height与height学习和总结

目录

问题引入

height与line-height是什么？

height与line-height的作用对象是什么？

height与line-height之间存在什么关系？

必要基本术语和概念

名词

概念

字体

作用的过程

height的作用过程

line-height的作用过程

总结

 

---

注：

• 斜体加粗：在基本术语中有补充
• 文章中框模型（盒模型）是一回事

问题引入

height与line-height是什么？

       height：height 属性设置元素的高度。行内非替换元素会忽略这个属性。

       line-height：设置行高。所有元素都可以使用。总结部分有对它的总结

height与line-height的作用对象是什么？

       height：块级元素本身内容框。

       line-height：块级元素内的匿名文本和行内元素的行内框。它首先会影响行间距，改变行内框的高度，进而间接影响行框的高度。

height与line-height之间存在什么关系？

       两者之间并没有直接关系，只是因为大小的不同而产生视觉上的效果。

 

---

必要基本术语和概念

在深入理解之前先来补充一些别要的概念才能帮助我们更好的去理解一个东西。

名词

• 匿名文本：指所有未包含在行内元素中的字符串。如下图1
• em框：font-size确定em框的高度，但字形可能比em框还高。见图2
• 内容区：内容区存在两种，1、内容区可以是元素中各个字符的em框串在一起的构成的框。 2、由元素中字符字形描述的框。最终的内容区的是什么样子取决于用户代理的选择（虽然两者 的高度不尽相同，但是对于后面的操作确实一样。小声说一句谷歌浏览器就是第二种）见图三
• 行间距：是font-size和line-height的差值。这个实际上要分为两半，分别应用到内容区的顶部和底部。为内容区增加的着两部分称为半间距。行间距只应用于非替换元素。另外行间距不会出现合并（如外边距）现象。见图三
• 行内框：这个框通过向内容区增加行间距来描述。对于非替换元素，元素的行内框高度刚好等于line-height的值。对于替换元素，元素行内框的高度则恰好等于内容区的高度。因为上一条的原因。见图三
• 行框：这是包含该行中出现的行内框的最高点和最低点的最小框。换句话说，行框的上边界要位于最高行框的上边界，而行框的底边要放在最低行内框的下边界。见图四

图1

图2

图三

图四

概念

• 内容区类似于一个块级元素的内容框
• 行内元素的背景应用于内容区及所有内边距
• 行内元素的边框要包围内容区及所有内边距（和边框）。
• 非替换元素的内边距、边框和外边距对行内元素或其他生成的框没有垂直效果；也就是说，他们不会影响元素行内框的高度（也不会影响包含该元素行框的高度）。
• 替换元素的外边距和边框确实会影响该元素行内框的高度，相应地，也可能影响包含该元素的行框的高度

字体

左边的line-height可以忽略，重要的是右边的。具体文章看真正的能理解CSS中的line-height，height与line-height

---

作用的过程

要深入了解，必须要知道它们作用的详细的过程

height的作用过程

对于所有块级元素都可以设定它们内容框的高度，但要注意只允许为非负值。

 

line-height的作用过程

 

 

1. 确定各行内的行内元素或匿名文本的行内框高度

 

主要计算分为两部分，一部分是根据内容区的高度（这里用户代理决定最终值，如果以em框合并的方式则高度为font- size，见上面），另一部分则是通过line-height-font-size=行间距，半间距分别加到内容区的顶端和底端。最终内容区的高度就是：行间距+内容区高度

      2. 确定基线的位置并对齐

这个过程一般是由浏览器处理完成，确定各个元素和匿名文本的基线位置，以及行的基线，并将各个元素或者匿名文本放到行的基线上。另外内容区需要确定它

      3. 对指定vertical-algin的元素的行内框进行偏移。（本文未涉及）

详细见vertical-algin的说明

      4. 确定行框的高度（以上都是对行内元素的影响过程）

由上面对行框的定义，可以简单的说，行框的高度等于：最高的行内框的顶端到基线的距离+最低行内框的底端到基线的距离。

      5. 行框效果的叠加（这也是对块级元素影响的过程）

一条规则：行框都是紧紧排列的，各行框的顶端挨着上一行行框的底端

---

总结

好多文章中都指出，在不设定height的情况下，元素的高度由line-height决定，根据上面的内容我们可以更加详细的解释，默认情况下，块级元素的高度由其内容的高度来决定也就是height：auto；。行框也属于一种”块级“元素，它当中包含了许多匿名文本和行内元素，并且由它们决定自身高度，这样行框的高度就会把元素高度height撑起来。看一下图理解的更快。

line-height:尽管所有的元素都具有该属性，但实际上，只直接影响行内元素和其他行内内容而不直接影响块级元素，也就是说可以为一个块级元素设置line-height值，但是这个值只应用到块级元素的内联内容才会有视觉效果。(line-height具有继承性）。

紫色：块级元素的内容框

黑色：行框

蓝色：内容区

红色：半间距

橙色：基线

注：原谅我。。我真的不会画画。。

然后我们就可以想一下为什么line-height与height指不同带来垂直方向上的显示情况？

例如：height<line-height，行框的高度大于元素（内容框）的高度，也就是说元素盛不下行框，行框的一部分被“遮挡住”。自然而然，显示上就会在元素垂直中线以下了。

其余两种情况可以自己试试。不过似乎应该，我们经常用到的是相等的情况。