css中的 x line-height vertical-align

最新推荐文章于 2024-09-15 21:53:51 发布

weixin_42291794

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量143

点赞数

分类专栏： css原理文章标签： css html javascript 前端

本文链接：https://blog.csdn.net/weixin_42291794/article/details/106673333

版权

css原理专栏收录该内容

9 篇文章 0 订阅

订阅专栏

x

字母x的下边缘为基线（baseline）。
字母x的高度为x-height、ex（相对于字体和字号的单位）。
字母x的交叉点的位置为middle。
文字高度：如：sqlx，x高度上下还有一部分q和l多出来的距离。

line-height

em-box：1em等于当前的font-size，只和字号有关。
内容区域：内容区域的高度受字体和字号影响，当字体为宋体时内容区域和em-box时相等的。
行距：line-height - em-box，css中行距上下等分，所以行高可以使文字垂直居中；但中文里文字的x交叉点会下沉，所以是近似垂直居中。
容器垂直中点：该容器垂直方向的正中点位置。
文字垂直中点：x的交叉点（和容器垂直中点比会下沉一些）。
纯内联元素（inline）高度由行高决定。
line-height默认值为normal（和字体有关，字体不同值不同，大概为1.多）。
line-height单位：数值1.5（相对于字号font-size）、百分比150%（相对于font-size）、长度值20px，2em（相对于font-size）。子元素继承的都是最终的计算后值。
line-height作用于每个行框盒子上。
line-height的大值特性：父级元素的高度由子元素line-height的最大值决定。
继承的权重最低。
font-size单位：150%（相对于父元素的font-size），其他的如line-height、width等%都是相对于自己（当前元素）的font-size。
使用display：inline-block生成除了幽灵空白节点之外的独立的行框盒子，用于重置行高。
多行文字居中：inline元素就有一行，形状不规则，可以折行，可以和其他元素在一行，行高由大的那一个元素决定；背景色跟着content走。但inline-block元素可以有多行，就有多个幽灵空白节点；形状为规则的方形，当一行放不下时，会整体下移，当由于空白节点宽度为0不占位置，所以文字有上移了。
line-height重置：一般为1.5

在这里插入图片描述

多行文字居中示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            background: #ff0;
            margin: 20px;
            text-align: center;
            width: 100px;
            height: 100px;
            font-family: 'simsun';
            line-height: 100px;
        }
        .div1>.inner{
            background: #fff;
            line-height: 20px;
            /* display: inline-block; */
            /* vertical-align: middle; */
        }
        .div1>.inner::first-line{
            background: chartreuse;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span class="inner">测试文字1测试文字1</span>
    </div>
</body>
</html>

在这里插入图片描述

1. 高度由行高决定示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            line-height: 50px;
            font-size: 0;
            background: #ff0;
        }
        .div2{
            border: 1px solid;
            font-size: 20px;
            line-height: 0;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="div1">测试文字1</div>
    <div class="div2">测试文字2</div>
</body>
</html>

在这里插入图片描述
2. line-height对内联元素的影响：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            background: #ff0;
            text-align: center;
        }
        .div1>span{
            background: #fff;
            font-family: 'simsun';
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span>测试文字1</span>
    </div>
</body>
</html>

宋体时：行距 = line-height - font-size，文字上下的黄色不分大小

其他字体时：

3. 内联元素 - 设计图和实际距离，文字间距对比示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            background: #ff0;
            margin-top: 20px;
            text-align: center;
        }
        .div1>span{
            background: #fff;
            font-family: 'simsun';
            line-height: 2;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span>测试文字1</span>
    </div>
    <div class="div1">
        <span>测试文字2</span>
    </div>
</body>
</html>

设计图标注：两个文字上下边缘的距离
实际间距：两个黄色框之间的距离，即设计图标注距离 - 行距（当上下两个文字字体大小相等时，否则就要分开设置上面文字的margin-bottom和下面文字的margin-top）
当line-height：1时，标注距离等于实际距离

line-height对替换元素的影响

line-height不能影响替换元素的高度。
内联盒子的每一行都有一个行框盒子，每个行框盒子前面都有一个“幽灵空白节点”（宽度为0，具有该元素的字体和行高属性，可以想象成一个x，该元素没有则继承父元素的）。
line-height实际是改变了替换元素前面的幽灵空白节点的高度。
line-height在其中决定了该行的最小高度。
替换元素：内容可以被替换的元素，替换元素是内联元素。

5.line-height对块级元素的影响

line-height通过改变块级元素中内联元素的高度来改变块级元素高度。
所以不管是内联、内联替换、还是块级元素，line-height都是通过改变内联元素高度来改变其高度的。

这里有两个行框盒子。
在这里插入图片描述

6. line-height为不同值的显示：

行距 = line-height - font-size，line-height变小，行距会变小，上下的文字就会重叠；单行文字中宽度不够时文字会覆盖。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .test{
            width: 100px;
            margin: 50px;
            background: aquamarine;
        }
        span{
            border: 1px solid;
        }
        .test1{ 
            line-height: 2;
        }
        .test2{ 
            line-height: 1;
        }
        .test3{ 
            line-height: 0.5;
        }
        .test4{ 
            line-height: 0;
        }
    </style>
</head>
<body>
    <div class="test test1">
        <span>lorem lorem</span>
        <span>lorem lorem</span>
    </div>
    <div class="test test2">
        <span>lorem lorem</span>
        <span>lorem lorem</span>
    </div>
    <div class="test test3">
        <span>lorem lorem</span>
        <span>lorem lorem</span>
    </div>
    <div class="test test4">
        <span>lorem lorem</span>
        <span>lorem lorem</span>
    </div>
</body>
</html>

在这里插入图片描述

inline元素宽度不够时且line-height:0，后面的会覆盖前面的，由于是一行，border跟着内容走。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            background: #ff0;
            width: 100px;
            height: 100px;
            font-family: 'simsun';
            display: inline-block;
        }
        span{
            border: 1px solid;
        }
        .test{
            line-height: 0;
            margin: 50px;
            width: 100px;
        }
    </style>
</head>
<body>
    <!-- <div class="div1">
        <span class="inner">测试文字1测试文字1</span>
    </div>
    <div class="div1">
        <img src="http://via.placeholder.com/100.png" alt="">
    </div> -->
    <div class="test"><span>lorem lorem lorem</span></div>
</body>
</html>

在这里插入图片描述

vertical-align

文字等内联元素基线为x下边缘；图片等内联替换元素基线为元素即图片下边缘;inline-block元素，里面有内联元素或者overflow：visible时，基线为元素里面最后一行内联元素的基线，否则基线为margin底边缘。
vertical-align只能作用于内联元素和display：tabel-cell的元素。
vertical-align的%是相对于line-height的。line-height的%是相对于font-size的。
line-height和vertical-align一般是一起起作用的。
font-size、line-height、vertical-align、幽灵空白节点、内联元素要一起考虑。
vertical-align的值：baseline、middle、top、bottom、text-top、text-bottom、sup、super、%、em、px
vertical-align：top：元素顶部和当前行框盒子定图对齐。
vertical-align：text-top：父级内容区域和盒子顶部对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        div{
            font-size: 30px;
        }
        span{
            background: #ff0;
        }
    </style>
</head>
<body>
    <div>
        <img src="http://via.placeholder.com/100.png" alt=""><span>x测试</span>
    </div>
</body>
</html>

在这里插入图片描述
inline-block元素对齐方式示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .div1 {
            border: 1px solid;
            background: #ff0;
            width: 100px;
            height: 100px;
            font-family: 'simsun';
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span class="inner">测试文字1测试文字1</span>
    </div>
    <div class="div1"></div>
</body>
</html>