关于CSS:line-height

栏目: CSS · 发布时间: 6年前

内容简介:先上结论:元素的高度是由什么决定对于我们解决页面显示问题和布局页面都有很大的帮助。 常规的操作表现是为一个块级元素设置height属性,则其拥有了高度:上述代码表现为:

先上结论:

  • 如果为块级元素设置height则其拥有高度
  • 如果没有为块级元素设置height元素中有文字且为该元素设置line-height则其拥有高度
  • 在第二种情况下文字的水平中线与块级元素的line-height中线是同一条(同一高度)

正文

元素的高度是由什么决定对于我们解决页面显示问题和布局页面都有很大的帮助。 常规的操作表现是为一个块级元素设置height属性,则其拥有了高度:

<style>
  .test {
    border: 1px solid #ccc;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div class="test"></div>
</body>
复制代码

上述代码表现为:

但是根据熟知,当我们不为元素设置height,而元素中有内容时,该元素依然获取到了高度:

<style>
  .test {
    border: 1px solid #ccc;
    width: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>
复制代码

直观表现为:

关于CSS:line-height

为什么div获取到了高度,并不是由于文字撑起了高度,而是line-height撑起了div,比较一下两端代码

.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 100px;
  }
</style>
<body>
  <div class="test">1</div>
</body>
复制代码
关于CSS:line-height
.test {
    border: 1px solid #ccc;
    width: 100px;
    line-height: 0;
  }
</style>
<body>
  <div class="test">1</div>
</body>
复制代码
关于CSS:line-height
显而易见的结果就是因为有了height所以有高度,没有height则因为有了line-height而有了高度 更多详细的细节其实是因为 每一行文字 都有一个line boxes, 这些一个个盒子自然撑起了父元素的高度

同时,观察上面的例子就能发现文字的中线和line-height的中线是在相同位置的,所以才有了常用的那套居中办法:

<style>
  .test {
    line-height: 100px;
    height: 100px;
  }
</style>
复制代码

这里再强调一点,以前说

设置line-height和height相同数值则可以使得其中文字垂直居中

从结果来看确实如此,但是这句话不对,这句话多余了几个字,完全不需要设置height,只需要line-height就可以做到文字垂直居中了。 至此,前言三条结论都在本文中做出了解释和观察。

结尾

这篇文章其实是为了 使用原生HTML+JS+CSS实现折线图 做准备的 会是一系列的文章,全部文章内容均为参考张鑫旭博客内容 本篇对应的博客地址为:张鑫旭博客地址


以上所述就是小编给大家介绍的《关于CSS:line-height》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编码的奥秘

编码的奥秘

Charles Petzold / 伍卫国、王宣政、孙燕妮 / 机械工业出版社 / 2000-9-1 / 24.00

渴望交流是大多数人的天性。在本书中,“编码”通常指一种在人和机器之间进行信息转换的系统。换句话说、编码即是交流。有时我们将编码看得很神秘,其实大多数编码并非都是这样。大多数的编码都需要被很好地理解,因为它们是人类交流的基础。――《编码的奥秘》 手电筒、英国人入侵、黑色的猫和跷跷板与计算机有什么必然联系?本书向我们展示了使用语言的一些直观方法并创造新的方法来进行相互之间的交流。此书使我们明白了......一起来看看 《编码的奥秘》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具