line-height测量及使用

最新推荐文章于 2022-01-06 20:17:43 发布
最新推荐文章于 2022-01-06 20:17:43 发布
阅读量544 收藏 1
点赞数
分类专栏： 前端 文章标签： line-height 测量 使用
原文链接：https://www.mk2048.com/blog/blog.php?id=h0cbc1cib&title=line-height%E6%B5%8B%E9%87%8F%E5%8F%8A%E4%BD%BF%E7%94%A8
版权

1、line-height定义

line-height表示行高，即两行文字基线间的距离。

以下是图示说明：

行高是2条红线之间的距离，即：1 2 3 4

在实际测量中，基线不好找，可测量顶线到顶线的距离来代替行高。

2、行间距

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>line-height行高测量</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            .p {
                width: 200px;
                margin: 100px;
                line-height: 100px;
                border: 1px solid green;
            }
        </style>
    </head>

    <body>

        <div class="p">
            中文abc12345
        </div>
    </body>

</html>

效果：

3、line-height取值

 /*浏览器默认*/
                line-height: normal;
                /*设置数字，此数字会与当前的字体尺寸相乘来设置行间距*/
                line-height:100px;
                /*设置固定的行间距*/
                line-height: 1.8;
                /*基于当前字体尺寸的百分比行间距。*/
                line-height: 180%;

说明：line-height可以继承，但是后代元素会继承这个缩放因子而不是计算值。

4、inline box

inline元素所产生的inline box，就是容器中每个行级元素都会产生一个inline box，而多个行级元素排成一行就会有多个inline box，即inline boxes。

<p>
            <span>行级元素1</span><span>行级元素2</span><em>行级元素3</em>行级元素4
        </p>

以上HTML有4个inline box，解释如下：

  • p元素是一个容器，包裹了整个行级元素
  • 不带标签的文字也是一个隐藏的行级元素

所有行级元素（行级元素1、行级元素2、行级元素3和行级元素4）具有四个inline box，而每一行都会有一个line box，其实就是每一行所有inline boxes，inline boxes高度取的是最高的inline box的高度。

即：每一行中，文字和图片都是inline box，它们共同组成了一个line box，line box的高度取决于inline box中最高的元素。

5、图片不受line-height影响

本示例图片尺寸为150*150px。

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>line-height行高属性</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            .p {
                margin: 100px;
                border: 1px solid red;
                line-height: 1.8;
            }
        </style>
    </head>

    <body>

        <div class="p">
            <img src="dist/img/1_jslang.jpg" alt="尺寸为：150*150" /><span>az123</span>
        </div>
    </body>

</html>

效果：

 

说明：上图的图片和文字下有一个间距，因为img的对齐方式默认为为基线对齐！

将img的基线对齐改为底部对齐可去除下面的空白

img{
                vertical-align: bottom;
            }

效果：

 

此时line-height应该设置为图片的高度，即150px。

文字和图片垂直居中的示例代码为：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>line-height行高属性</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            .p {
                margin: 100px;
                border: 1px solid red;
                /*设置为图片的高度了*/
                line-height: 150px;
            }
            
            img {
                /*图片对齐方式改为底部对齐*/
                vertical-align: bottom;
            }
        </style>
    </head>

    <body>

        <div class="p">
            <img src="dist/img/1_jslang.jpg" alt="尺寸为：150*150" /><span>az123</span>
        </div>
    </body>

</html>

效果：

 6、块级元素的高度和字体大小没有关系，是由行高决定。

示例代码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>line-height</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            .test1 {
                line-height: 14px;
                font-size: 50px;
                background-color: #f00;
            }
            
            .test2 {
                line-height: 50px;
                font-size: 14px;
                background-color: #ccc;
            }
        </style>
    </head>

    <body>
        <br />
        <br />
        <p class="test1">
            我的行高是14px，字体大小是50px；
        </p>
        <br />
        <br />
        <p class="test2">
            我的行高是50px，字体大小是14px；
        </p>
    </body>

</html>

 

效果：

 

7、 行级元素元素的高度由字体大小决定，与行高无关。

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>line-height</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            
            .test1 {
                line-height: 14px;
                font-size: 50px;
                background-color: #f00;
            }
            
            .test2 {
                line-height: 50px;
                font-size: 14px;
                background-color: #ccc;
            }
        </style>
    </head>

    <body>
        <br />
        <br />
        <br />
        <p>
            <span class="test1">我的行高是14px，字体大小是50px；</span>
        </p>
        <br />
        <br />
        <p>
            <span class="test2"> 我的行高是50px，字体大小是14px；</span>
        </p>
    </body>

</html>

 

 

效果：

 

前端独秀
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
line-height的使用
Z__XY_的博客
01-12 2309
line-height
line-height的用法（一）
weixin_30402343的博客
03-09 453
行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。 从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。尤其记得基线不是最下面的线，最下面的是底线。 行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。 行距是指一...
line-height的使用方式
余光的博客
10-12 7975
line-height line-height 这个属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 一、line-height 属性被指定为以下任何一个： /* Keyword value */ line-height: normal; 取决于用户端。桌面...
line-height使文本居中的3像素bug问题
09-27
在网页制作中，文本居中是一个常见的需求，而line-height属性正是用来调整行内元素中文本垂直对齐的关键。然而，有时候我们可能会遇到一个看似"bug"的现象，即使用line-height进行居中时，文本与容器之间会有3像素的...
draw-string-line-height：.NET System.Drawing.Graphics类的扩展方法，该类允许在指定文本的自定义行高的同时测量和绘制字符串
02-05
此程序包包含System.Drawing.Graphics类的扩展方法，以允许使用自定义的行高和字体来测量和绘制文本。 项目源代码位于src文件夹中，库的单元测试项目位于tests目录中。 要求 该软件包针对netstandard2.0因此与...
06 Halcon 点云平面度测量.zip
06-28
set_drawing_object_params (DrawID, 'line_width', 1) attach_drawing_object_to_window (WindowHandle, DrawID) .......... *平面度 height:=theta/zScale*0.001 *可视化高度差效果 visParamName := ['lut','...
js使用svg实现图像间距测量线.zip
11-01
本项目“js使用svg实现图像间距测量线”旨在利用这两种技术来创建一个工具，允许用户在网页上测量图像上的任意两点之间的距离。这个功能对于图像编辑、设计或在线教学平台等场合非常实用。 SVG是一种基于XML的图形...
line-height详解
热门推荐
liting_1992的博客
10-21 3万+
基本概念 line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。 图中：上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~ 根据浏览器的解析不同，line-height的表现方式有两种 1.基线之间的距离为line-height 2.lineHeight 为，font-size的上下加上半行距 ** 取值 ** 值
line-height（行高）
softlipaaa的博客
07-06 4105
line-height（行高）line-height（行高）介绍字体框 line-height（行高）介绍 1、行高指的是文字占有的实际高度 2、通过line-height来设置行高 3、行高可以直接指定一个大小（px em） 4、也可以直接为行高设置一个整数。如果是一个整数的话，行高将会是字体的指定的倍数 5、行高会在字体框的上下平均分配 6、可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中 7、行高经常还用来设置文字的行间距      
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？
丑小鸭变黑天鹅的博客
03-20 7723
你经常用的line-height使内容垂直居中，你真的懂它的原理吗？一、line-height是什么二、分析其原理三、扩展一下 一、line-height是什么 line-height 属性设置行间的距离（行高），说的直白一点，就是设置两段段文本之间的距离如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了。 二、分析其原理 首先来看个图 如图，每一行文字，可看成由上间距、文本内容、下间距构成，根据行高的标准定义，行高等于两条基线之间的距离，即第一行的3-4+上下间距+第二
07-行高（line-height）
梦格的博客
08-03 1918
行高（line-height） 1 行高测量 行高的测量方法： 从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。 尤其记得基线不是最下面的线，最下面的是底线。 2 单行文本垂直居中 行高我们利用最多的一个地方是： 可以让单行文本在盒子中垂直居中对齐。 文字的行高等于盒子的高度。 这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。 行高 = 上
我确信你还没有完全搞明白它的含义! 熬夜整理了一万多字的line-height详细总结,还看不懂那我真的要跪了！
极客小俊
02-25 3957
干了5年前端开发,居然不知道line-height ?
html里面行高的原理,CSS行高（line-height）及文本垂直居中原理
weixin_39638801的博客
05-31 2152
在CS多现业讲进行效通近年有务这行定果过近年有S中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如二，都过发宗发数前业很断屏击和公图使分近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务有的蔽战滚司标用别近步现喜进过，分一端务下面的例子：...
HTML中设置行高的属性是,line-height属性(行高标签用法)
weixin_39784263的博客
06-04 7531
line-height属性1、line-height特点设置行间的距离(行高)，而行距离的尺寸分配是line-height与font-size的计算值之差(在CSS中成为“行距离”)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框便是行框(line-box)，2、可能的值有：注：行距离自动习惯行高的方法，最好用的是采用number数值的方法。3、设...
height和line-height的区别（简单易懂）
apple_51491580的博客
02-07 1万+
height：指定区域的高度 line-height：一行的高度，简称行高。 行高：两行文字之间基线的距离 1.height和line-height值相同的情况 当height和line-height相等时，区域中的内容居中（即区域的高度和每一行的高度一样，内容居中） 如图所示： 内容居中（蓝色部分是选中的部分，有背景的地方是定义的区域），有背景的地方就是区域高度（height），选中的时候蓝色部分的高度即为行高。 2.对height进一步理解 看下图： 这里height是两倍line-heigh
CSS中line-height属性
qq_42526440的博客
01-06 2242
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。 CSS Demo: line-height line-height: normal; line-height: 2.5; line-height: 3em; line-height: 150%; line-height: 32px; 语法 /* Keyword valu
【前端Talkking】CSS系列——CSS深入理解之line-height
weixin_33774308的博客
06-08 155
1.写在前面 两个多周的时间没有写文章了，手好痒好痒，趁着公司在装修，从上周末到本周都在家办公，同时公司的项目并不紧急，于是抽着时间梳理了一下CSS中关于行高line-height的理解，今天发布出来，大家准备好了吗？ 2.基本概念 2.1行高的定义与图解 行高，顾名思义指的就是一行文字的高度。按照定义来解释，就是两行文字之间基线之间的距离。那么问题来了，什么是基线呢？大家回想下我们刚开始学习汉语...
帮我找一些用python-opencv写的对机械零件尺寸测量的代码
最新发布
03-23
以下是一些用Python-OpenCV编写的机械零件尺寸测量的代码示例： 1. 通过轮廓检测测量物体的尺寸 ```python import cv2 # 读取图像 img = cv2.imread('part.jpg') # 转换为灰度图像 gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 二值化图像 ret, thresh = cv2.threshold(gray, 127, 255, cv2.THRESH_BINARY) # 查找轮廓 contours, hierarchy = cv2.findContours(thresh, cv2.RETR_TREE, cv2.CHAIN_APPROX_SIMPLE) # 绘制轮廓 cv2.drawContours(img, contours, -1, (0, 255, 0), 2) # 计算物体的尺寸 cnt = contours[0] x, y, w, h = cv2.boundingRect(cnt) print('Width:', w) print('Height:', h) # 显示图像 cv2.imshow('image', img) cv2.waitKey(0) cv2.destroyAllWindows() ``` 2. 使用霍夫变换检测直线并测量长度 ```python import cv2 import numpy as np # 读取图像 img = cv2.imread('part.jpg') # 转换为灰度图像 gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 边缘检测 edges = cv2.Canny(gray, 50, 150, apertureSize=3) # 进行霍夫变换检测直线 lines = cv2.HoughLines(edges, 1, np.pi/180, 200) # 绘制直线 for line in lines: rho, theta = line[0] a = np.cos(theta) b = np.sin(theta) x0 = a*rho y0 = b*rho x1 = int(x0 + 1000*(-b)) y1 = int(y0 + 1000*(a)) x2 = int(x0 - 1000*(-b)) y2 = int(y0 - 1000*(a)) cv2.line(img, (x1, y1), (x2, y2), (0, 0, 255), 2) # 计算直线长度 length = np.sqrt((x2-x1)**2 + (y2-y1)**2) print('Length:', length) # 显示图像 cv2.imshow('image', img) cv2.waitKey(0) cv2.destroyAllWindows() ``` 3. 使用模板匹配测量物体的尺寸 ```python import cv2 import numpy as np # 读取图像和模板 img = cv2.imread('part.jpg') template = cv2.imread('template.jpg') # 转换为灰度图像 img_gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) template_gray = cv2.cvtColor(template, cv2.COLOR_BGR2GRAY) # 获取模板的尺寸 w, h = template_gray.shape[::-1] # 进行模板匹配 res = cv2.matchTemplate(img_gray, template_gray, cv2.TM_CCOEFF_NORMED) # 获取匹配结果的坐标 min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(res) # 绘制匹配结果的矩形框 top_left = max_loc bottom_right = (top_left[0] + w, top_left[1] + h) cv2.rectangle(img, top_left, bottom_right, (0, 0, 255), 2) # 计算物体的尺寸 width = w height = h print('Width:', width) print('Height:', height) # 显示图像 cv2.imshow('image', img) cv2.waitKey(0) cv2.destroyAllWindows() ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值