haizlin/fe-interview

[css] 第21天 说说你对line-height是如何理解的？

Opened this issue · 14 comments

haizhilin2013 commented

第21天 说说你对line-height是如何理解的？

yxkhaha commented
  • line-height 行高，就是两行文字之间基线的距离，用来调整文字的行间距。
Mooiq commented

line-height的高度单位建议使用em、rem，这样就可以避免因为容器高度变化引起的行高差异。

  • 👎9
AricZhu commented

行高属性，表示一行是字体的多大倍数，比如line-height: 1, line-height: 1.5就分表表示一行高度是当前字体大小的一倍，或1.5倍

Konata9 commented

line-height 在日常用的最多的是让单行文字垂直居中（其实不需要设置 height，一个 line-height 即可）。因为 line-height - font-size 为行距，一般会近似平分到文字的上下两边，使文字看上去垂直居中。如果需要多行文字的垂直居中，还需要加上 vertical-align: middle;。

line-height 可以不设置单位，表示 font-size 的倍数。

另外对于非替换元素的纯内联元素，其高度是由 line-height 所决定的。

参考文章：
张鑫旭大神 《CSS 世界》
CSS 深入理解之 line-height

  • 👍1
  • 😄1
151819880412 commented

请问一下，如果高度设置的是百分比该怎么使用line-height居中？还是说有其他方法

blueRoach commented
  • line-height行高，会以lineheight的值取中线，来展示元素的位置
  • 单位有PX和没有单位（font-size的倍数）
  • 对于没有高度的元素，高度是由line-height决定的
MrZ2019 commented

line-height行高，会以lineheight的值取中线，来展示元素的位置
单位有PX和没有单位（font-size的倍数）
对于没有高度的元素，高度是由line-height决定的

maxthonl commented

@Mooiq 不带单位的纯数字才是更好的

MDN没有欺骗你，但是也请仔细看看em的定义，这两个应该可以划等号

  • 😄1
  • 😕1
zxcdsaqwe123 commented

行高，可以用来控制单行文字的占位高度

amikly commented

**line-height**属性用于设置多行元素的空间量，如多行文本的间距。

对于块级元素，它指定元素行盒（line boxes）的最小高度。

对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

两行文字基线之间的高度距离

## 属性值

值 描述
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。
Iambecauseyouare commented

line-height行高
指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
如果一个标签没有height属性，则是line-height决定
height和line-height一样的值，可以垂直居中

an31742 commented

"line-height" 属性用于控制文本行之间的行高（行间距）。它可以影响到文本在行框内的垂直对齐方式和整体间距的外观。下面是我对这个属性的理解：

  1. 行高的计算：

    • 行高的计算是相对于文本字体大小来进行的，可以使用绝对单位（如像素）或相对单位（如百分比、倍数）来指定行高的值。
    • 行高的计算包括文本的实际高度、上行高度（水平线以上）和下行高度（水平线以下）。这些值的组合形成了文本行的整体高度。

  2. 行高的影响：

    • "line-height" 属性不仅影响文本行之间的垂直间距，还会影响行内元素在行框中的垂直对齐方式。
    • 如果行高值大于文本字体大小，文本将垂直居中显示在行框内。如果行高值小于字体大小，文本将向上对齐。
    • 行高值还会影响文本行在垂直方向上的外观，决定了行与行之间的间距大小。

总结起来，"line-height" 属性是控制文本行与行之间的垂直间距的一种方式。通过设置适当的行高值，可以影响文本的垂直对齐方式和整体间距，以满足设计和排版的需求。

never123450 commented

line-height 是 CSS 属性，用于设置行高，即行框的高度。它可以影响文本行在垂直方向上的间距和对齐。

具体来说， line-height 可以接受以下值：

  1. 像素值（px）：设置行高为固定像素值。例如， line-height: 24px; 表示每一行的高度为 24 像素。

  2. 百分比值（%）：设置行高为相对于当前字体大小的百分比值。例如， line-height: 150%; 表示每一行的高度为当前字体大小的 150%。

  3. 数字值：设置行高为相对于当前字体大小的倍数。例如， line-height: 1.5; 表示每一行的高度为当前字体大小的 1.5 倍。

  4. 单位less：设置行高为没有单位的值，相对于当前字体大小。例如， line-height: 1.5; 表示每一行的高度为当前字体大小的 1.5 倍。

line-height 还可以接受其他一些特殊值，如 normal 、 inherit 等。

通过调整 line-height 的值，可以改变文本行的间距和对齐方式。较大的 line-height 值会增加行之间的间距，而较小的值则会减少间距。此外， line-height 还会影响垂直居中对齐的效果。

需要注意的是， line-height 的具体效果还会受到其他因素的影响，如字体大小、行内元素的布局等。因此，在调整 line-height 时，需要综合考虑其他样式属性和布局需求，以达到期望的效果。