[CSS]使用线高度的线路设置方法

“我不知道如何设置线高值设置”
“始终在线之间设置数值。”

听听声音。当然,有多种类型的“线高”值,用于设置线之间的宽度,并且有一个名为“歌曲”的印象。但是,无法使用CSS初始化设置线路设置,并对旨在易于查看的网站进行直观的印象。针对字符尺寸的部位而不是线路被堵塞的网站。

为此,这次学习“线高度”。这不是那么困难的CSS属性。如果您能理解该机制,它是一个易于使用的属性。如果你觉得有点困难,请掌握这个机会。

[对于初学者]仔细解释如何编写CSS(样式表)

什么是线高度?

“Line-Height”是调整行高度的属性,允许您调整句子和语句之间的空间,但在文本(一行)之前和之后的空间如下:“线路高度请理解那。换句话说,您看到的空间来自句子的顶部和底部语句。

因此,可以根据下面计算“线高”,即“一行的高度”。

线高=空间高度+字体大小+下面的空间
也就是说,当计算空间时,将字符大小的值分配了“线高”的值,并且该值除以2(上和下),由此已知上部和下部空间的高度。

如何使用行高度

线路高度设置如下。

所以,让我们立即设置一个值。将1设置为值。

<div class="sample">
   <p>これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。これはサンプルです。</p>
</div>
p{
  width: 50%;
  font-size: 18px;
  line-height: 1;
}

它显示在浏览器中,如下所示:换句话说,没有设置该行。也就是说,如果设置为“1”,则字体大小被设置为行的高度。如您所见,数值设置基于字符的大小,并确定线高的高度为大小。

接下来,让我们设置值“2”。

p{
  font-size: 18px;
  line-height: 2;
}

然后,它将在浏览器中显示如下。您可以看到该行已传播。

线的高度是计算设置的高度“字体大小18px×线 - 高度值”2“= 36px”。结果,“9px”设置上下。例如,设置“18px”。此外,值无法设置为减号。虽然它可以设置,但结果与“普通”设置相同,并且没有含义。

相反,让我们将比线路线的字符大小小的值设置为行 - hehik。

p{
  font-size: 18px;
  line-height: 0.5;
}

然后显示字母和字母。这根本不符合逻辑。 Line-Hight设置也是由于设置的单位,但请记住,它们与“字符尺寸”密切相关。如果显示以下显示,请检查字符的大小并检查设置值是否不小。

此外,假设那些在不同环境中查看浏览器的人,设置值被认为是“1.5”。

在主要段落内容中,确保线路高值的最小值为1.5。这对那些有弱视和认知残疾人的人来说很有用。如果展开页面,以便文本维度将很大,如果使用无单元值,则线路的高度也将以相同的速率扩展。请参阅此处。

线高度单位

嗯,如上所述,作为线路 - 高值,只指定了数字,但还有其他可以采取的值单位。它将被解释,因为情况使用了这种情况。

价值单位 描述
普通的 这是初始值。它将使用浏览器自动指定。
数字+ PX. 如果在“px”中指定,则使用PX设置高度,无论字符的大小如何。因为它是绝对值,所以它将在任何屏幕中具有相同的值。请注意,即使字符设置为变量值,它也不会改为行的高度。
数字+ EM. “EM”是与“PX”不同的相对价值。该值根据字符的大小而异。例如,如果字符大小为“18px”,“Line-Hight:1.5em;”是“27px(18px x 1.5)”。
数字+% “%”规范是相对值以及“EM”。该值波动为角色的大小。例如,如果字符大小为“18px”,“Line-hight:100%;”是“18px(18px×1)”,并且不会随着仅限值设置为“1”而变化。
不可避免的 “无单元”规范仅针对数字指定。这也波动到角色的大小。和此设置方法是最推荐的方式。

如上所述,通过单位,可以设置的值是“绝对值”或“相对值”。如果用户只从网站上访问,则可能是绝对值,但是如果假设假设从各种设备访问它,则屏幕可能不会折叠。

单位规范与单位指定之间的差异

嗯,如上所述,单位可以是各种各样的,但实际上它很常见于“无单元”。为什么,无论是,这里都是称为“价值的继承”的运动。

此移动设置单元,即使“父→子→孙子”在元素中不同,线的高度也不会与此字符的大小成比例,父元素据说线高度适应儿童和孙子的元素。因此,在用子元素和孙子子里指定“字体大小”时要小心。当您想要与孩子或孙子一起移动时,每个“字体大小”都需要每个“字体大小”。如果您指定“无单元”,则有许多人希望此设置避免此麻烦。

例如,写下以下HTML:

<div class="parent">
   <p>これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。これは親要素です。</p>
   <div class="child">
     <p>これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。これは子供要素です。</p>
      	<div class="grandchild">
             <p>これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。これは孫要素です。</p>
    </div>
</div>

让我们尝试这个HTML的三个模式(没有%/ em /单位)。首先,指定“%”。 “线高:200%;”被指定。

.parent{
  font-size: 25px;
  line-height: 200%;
}

.child{
  font-size: 18px;
}

.grandchild{
  font-size: 12px;
}

浏览器中的显示屏如下所示: “200%”也由儿童和孙子继承。即使单位改变为“2EM”,这也会相同。

同样,可能有人想要独特设计,并希望根据角色的大小调整线的高度。在这种情况下,如果为每个孩子和孙子指定“线高度”,则没有问题,但每次都有麻烦。 “没有单位”是方便的,基于父级的线路高度,是根据儿童和孙子的大小调整线的高度。事实上,让我们试试吧。

.parent{
  font-size: 25px;
  line-height: 2;
}

.child{
  font-size: 18px;
}

.grandchild{
  font-size: 12px;
}

与“单位”的规范不同,只有一个“线高”规范对于父元素,也可以发现线的高度根据儿童和孙子的特征的大小而改变。以这种方式,当已知元件的移动中的差异时,每次层次结构降低时,选择“无单元”是好的。

总结您所引入的内容将出现在下行的高度。

线高值单位 父(字体大小:23px) 儿童(字体大小:18px) 孙子(字体大小:13px)
线高:200%; 行高46px. 行高46px. 行高46px.
线高:2EM; 行高46px. 行高46px. 行高46px.
“没有单位” 行高46px. 行高度36px. 行高26px.

CSS线高度摘要

最后,我想知道“线高度”。

  • Line-Height属性是设置行高度的属性,并在浏览器上显示,具有字符的大小和上大理石值。
  • 线高度属性位于Line-Height:Value;
  • 虽然有“相对规范”和“绝对指定”以值单位,但是在相对规范中使用“无单元”的指定方便。
  • 因为设置“单位”的值,所以将该值置于儿童或孙子的元素。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。