学习line-height 和 vertial-align

最新推荐文章于 2024-01-02 07:45:00 发布

原创最新推荐文章于 2024-01-02 07:45:00 发布 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了CSS中line-height和vertical-align属性的工作原理，包括它们如何影响文本布局及解决常见显示问题的方法。

学习line-height 和 vertial-align

1 line-height

一个div元素的高度其本质上是由line-height属性决定的下面做实验。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
    p:nth-child(1){
        background-color: #E31010;
        font-size: 26px;
        line-height: 10px;
        /*overflow: hidden;*/
    }
    p:nth-child(2){
        font-size: 16px;
        line-height: 26px;
        background-color: #00FF24;
    }
  </style>
</head>
<body>
<p >1111111111111111111111</p>
<p >1111111111111111111111</p>
</body>
</html>

CSS-lineheight1

我们可以看到当font-size大于line-height的时候溢出需要overflow处理验证了这一点，但是另外一方面font-size有时候也决定了line-height(例如:1em)。我们能够看到绿色的字上下都有距离，这是行距:

行距=’line-height’-‘font-size’

所以一行元素使用vertical-align能够居中因为上下行距相等所以近似使其上下居中，但是为什么是近似相等因为。vertical-align是在基线上与等分析按之间的距离基本上是X的高度所以不同的字体不一样。因此是近似居中。

2 line-height的一些细节

属性值

line-height的默认值是normal,但是不同字体以及不同浏览器的line-height的值都是不一样的。

line-height具有数值、百分比、长度值三种属性。他们在继承上有细微的差别，如果使用数值作为属性值那么所有属性值得继承都是这个值。但是如果使用其他的值则是在子元素计算之后得出的值。

line-height的大值特性

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
    .box{
      line-height: 96px;
      background-color: #00FF05;
    }
    .box span{
      line-height: 20px;
      background-color: #FF00BF;
    }
    .box2{
      line-height: 20px;
      background-color: #00FF05;
    }
    .box2 span{
      line-height: 96px;
      background-color: #FF00BF;
    }
  </style>
</head>
<body>
<div class="box">
  <span>内容...</span>  
</div>
<div class="box2">
  <span>内容...</span>  
</div>
</body>
</html>

我们可以看到两个外部box元素都是96，那么box2类下面的属性如何来理解呢。主要是因为无论内联元素的line-height如何进行设置，最终父级元素的高度都是由数值最大的那个line-height。上面的情况根据我的理解，每个内联元素都是会有一个空白节点在内联元素的前面，内部的span高度为96px时，那个空白节点则变为96px将其撑开。

vertial-align

内联元素默认都是沿着字母x的下边缘对齐的，对于图片等替换元素则是底部。在CSS中vertical-align的属性百分比则是基于line-height进行计算的。

注：vertial-align只能应用于内联元素以及dispaly为table-cell的元素。

图片底部的间隙

<style type="text/css">
    .box{
      width: 280px;
      outline: 1px solid #aaa;
      text-align: center;
      /*font-size: 0px;*/
    }
    .box >img{
      height: 96px;

    }
</style>
<div class="box">
  <img src="截图1.png"> 
</div>