CSS line-height和vertical-align详解

最新推荐文章于 2022-04-20 21:21:41 发布

啊啊啊～～

最新推荐文章于 2022-04-20 21:21:41 发布

阅读量616

点赞数

本文链接：https://blog.csdn.net/qq_40891322/article/details/109051431

版权

css 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

line-height

1 篇文章 0 订阅

订阅专栏

一.line-height

首先看一张图：
在这里插入图片描述
从上到下分别是top(顶线),middle(中线),baseline(基线),bottom(底线)
1.line_height:行高，等于内容区域高度+行间距，在图中就是上一行文字底线到下一行文字底线之间的距离。
2.font-size：font-size为字体的高度，图中就是一行文字顶线到底线之间的区域的高度，也就是内容区域高度，即为图中深灰色部分。
3.行间距：两行文字之间的距离，图中就是上一行文字底线到下一行文字顶线之间的距离。
在这里插入图片描述

4.行内框：行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）
5.行框：行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
6.行内元素不是被font-size撑开的，而是被line-height撑开的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
    <div style="font-size: 30px;line-height: 10px;background-color: darkcyan;">30px 10px</div>
    <div style="font-size: 30px;line-height: 200px;background-color: darkgoldenrod;">30px 100px</span>
</body>
</html>

在这里插入图片描述
7.line-height取值
（1）百分比：

（2）长度：

（3）normal

（4）纯数字：

总结：使用百分比和长度（px），line-height在继承为一个相同的固定值
使用normal和纯数字会按比例缩放

<html>
<head>
<meta charset="utf-8"> 
<title></title> 
</head>
<body style="line-height: 1.5;">
    <div style="font-size: 30px;background-color: darkcyan;">30px 10px</div>
    <div style="font-size: 50px;background-color: darkgoldenrod;">30px 100px</div>
    <h1 style="background-color: aquamarine;">hhhhhhh</h1>  
</body>
</html>

在这里插入图片描述

二.vertical-align

https://www.cnblogs.com/hykun/p/3937852.html
1.vertical-align的默认值为baseline，默认，元素放置在父元素的基线上。
2.vertical-align:top; 把元素的顶端与行中最高元素的顶端对齐。
3.vertical-align:bottom; 把元素的底端与行中最低的元素的底端对齐。
4.vertical-align:text-top; 把元素的顶端与父元素字体的顶端对齐。
5.vertical-align:middle; 把此元素放置在父元素的中部,对齐的是父元素字体的中部。
6.vertical-align:baseline; 把此元素放置在父元素的基线上，对齐的是父元素字体的基线。
7.vertical-align:text-bottom; 把元素的底端与父元素字体的底端对齐。如下所示：
8.可以使用定长表示元素底部与父元素基线（baseline）的距离，如vertical-align:20px;
9.可使用百分数表示元素底部相对于父元素基线（baseline）移动相对于父元素高（height）的百分比，如vertical-align:40%;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
    div .span1 {
      display: inline-block;
      
    }
    div .span2 {
      display: inline-block;
      overflow: hidden;
      
    }
  </style>
</head>
<body>
    <div style="border: 1px solid cyan;font-size: 30px;">
        x
        <img src="img/img2.png" style="vertical-align: bottom;">
        汉字
        <input type="text">
        <button>按钮</button>
        <span class="span1">span1</span>
        <span class="span2">span2</span>
    </div>
    =====================================================================================
    <div style="background-color: aquamarine;font-size: 20px;">
        xxxxxxx
        <button style="vertical-align: text-top;">text-top</button>
        <span style="display: inline;background-color: burlywood;vertical-align: middle;">middle</span>
        <input type="text" style="vertical-align: baseline;" value="baseline">
        <span class="span1" style="vertical-align: text-bottom;">text-botom</span>
        <span style="display: inline-block;background-color: coral;width: 100px;height: 300px;">最高</span>
        <span class="span2" style="vertical-align: top;background-color: cornflowerblue;">top</span>
        <span style="display: inline-block;background-color: coral;width: 150px;height: 30px;vertical-align: top;">top</span>
        <span style="display: inline-block;background-color: brown;width: 100px;height: 30px;vertical-align: bottom;">bottom</span>
    </div>
</body>
</html>

在这里插入图片描述

啊啊啊～～

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS line-height和vertical-align详解

一.line-height首先看一张图：从上到下分别是top(顶线),middle(中线),baseline(基线),bottom(底线)1.line_height:行高，等于内容区域高度+行间距，在图中就是上一行文字底线到下一行文字底线之间的距离。2.font-size：font-size为字体的高度，图中就是一行文字顶线到底线之间的区域的高度，也就是内容区域高度，即为图中深灰色部分。3.行间距：两行文字之间的距离，图中就是上一行文字底线到下一行文字顶线之间的距离。4.行内框：行内框是一
复制链接

扫一扫