CSS----vertical-align，line-height基础知识整理

最新推荐文章于 2022-09-11 15:16:18 发布

Seeyoucm

最新推荐文章于 2022-09-11 15:16:18 发布

阅读量298

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_42833001/article/details/102471286

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

（一）vertical-align：指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式（注意行内元素与单元格元素）
在这里插入图片描述
vertical-align 属性指定为下面列出的值之一。
（1）行内元素的值

/* Keyword values */
//相对于父元素
vertical-align: baseline; //使元素的基线与父元素的基线对齐。
vertical-align: sub;//使元素的基线与父元素的下标基线对齐。
vertical-align: super;//使元素的基线与父元素的上标基线对齐。
vertical-align: text-top;//使元素的顶部与父元素的字体顶部对齐。
vertical-align: text-bottom;//使元素的底部与父元素的字体底部对齐。
vertical-align: middle;//使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。

//相对行的值，没有基线的元素，使用外边距的下边缘替代。
vertical-align: top;//使元素及其后代元素的顶部与整行的顶部对齐。
vertical-align: bottom;//使元素及其后代元素的底部与整行的底部对齐。

/* <length> values 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。 */
vertical-align: 10em;  
vertical-align: 4px;

/* <percentage> values 使元素的基线对齐到父元素的基线之上的给定百分比*/
vertical-align: 20%; 
//此百分比基于line-height的百分比，基数是line-height的值，可以是负数

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

（2）表格单元格的值

baseline (以及 sub, super, text-top, text-bottom, <length>, <percentage>)：使单元格的基线，与该行中所有以基线对齐的其它单元格的基线对齐。
top：使单元格内边距的上边缘与该行顶部对齐。
middle：使单元格内边距盒模型在该行内居中对齐。
bottom：使单元格内边距的下边缘与该行底部对齐。
可以是负数。

（二）line-height：用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

/* Keyword value */
line-height: normal; //取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;//该属性的应用值是这个无单位数字乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。

/* <length> values */
line-height: 3em;//指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果

/* <percentage> values */
line-height: 34%;//与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。
在使用行高的值的时候需要注意的是：使用无单位的行高可避免意外结果。长度和百分比线高度有不良的遗传行为。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      width: 18em;
      display: inline-block;
      vertical-align: top;
      font-size: 15px;
    }
    .green {
      line-height: 1.1;
      border: solid limegreen;
      }
    .red {
        line-height: 1.1em;
        border: solid red;
      }
    h1 {
      font-size: 30px;
    }
  </style>
</head>
<body>
    <div class="box green">
        <h1>Avoid unexpected results by using unitless line-height.</h1>
         length and percentage line-heights have poor inheritance behavior ...
       </div>
       
       <div class="box red">
        <h1>Avoid unexpected results by using unitless line-height.</h1>
         length and percentage line-heights have poor inheritance behavior ...
       </div>
       <!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
       <!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px -->
</body>
</html>

当子元素没有自己的line-height的时候：
当父元素的line-height是无单位的数字的时候，子元素的line-height会基于自己的font-size为基数得到line-height的值
在这里插入图片描述
当父元素的line-height是百分比或者长度单位的的时候，子元素的line-height会基于父元素的font-size为基数得到line-height的值

当父元素的line-height的值时长度，同时单位是em的时候，产生不确定的结果