line-height:1的存在意义是什么（v1）

最新推荐文章于 2023-06-30 10:51:57 发布
最新推荐文章于 2023-06-30 10:51:57 发布
阅读量621 收藏 2
点赞数 1
分类专栏： css 文章标签： 前端 javascript ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/meis27461/article/details/128380286
版权

一、line-height:1的存在意义是什么（v1）

1. 加不加这段代码的区别是什么？

示例代码

<!DOCTYPE html>
<html lang="en">
<style>
    p{line-height:1;} /* 随时注释的line-height:1 */

    p{margin:0;background-color:#f5f5f5;border-bottom:solid 1px #ccc}
    p:nth-child(1){font-size:12px;}
    p:nth-child(2){font-size:14px;}
    p:nth-child(3){font-size:16px;}
    p:nth-child(4){font-size:18px;}
    p:nth-child(5){font-size:20px;}
</style>
<body>
    <p>12</p>
    <p>14</p>
    <p>16</p>
    <p>18</p>
    <p>20</p>
</body>
</html>

不加的情况下如下:
在这里插入图片描述
加上的情况：
在这里插入图片描述
明显的，我们可以看出它们的高度产生了变化。

也可以说文字上下的空白区域减少了，更贴合字体了。

2. 这样做的主要目的是什么？

这样做的主要目的是为了高保真还原设计图，在特意提及并有需求的情况下，部分的UI设计图要求精准控制展示效果，字体的高度是被严格控制的。

字体行高需要紧贴字体的情况下，可以使用line-height:1，或者line-height:100%。它们两个的效果是一样的。

二、参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

https://blog.51cto.com/u_15302032/5069527

Yehger
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS深入理解之line-height
literarygirl的博客
02-12 1万+
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。 一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。 定义三问： 什么是基线？ 为何是基线？ 需要两行？ 如图红色线即为基线 基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线） 第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
css line-height
且听风吟的博客
06-16 415
line-height 属性设置行间的距离（行高）
line-height:1是什么意思
YodgeGGG的博客
12-09 6591
line-height:1是什么意思 其实仍旧是设置行高的一种方法，只不过简化了语句 举个例子，比如此时你设置了font-size：20px，之后你设置了line-height:1，转义过来的意思就是line-height:20px，行高为20px，这种定义样式的方法通常会用于iconfont的设置 好啦，就是这么简单，希望可以解答你的疑惑！ ...
line-height:1；的理解
cf_xyn151886的博客
04-11 531
line-height如上图的两条基线的距离，即两条大红线的距离，也可以说是两条蓝线的距离 ，如图中标注，但是严谨地说应该是两条基线的距离，这也就解释为什么line-height和height的值一样的时候，为什么就是行内元素居中了？那字母大部分都在基线上排列，因为line-height表示的是文字的高度，height表示的是元素的高度，这两者相同的时候就表示元素的高度是由元素中的文字所撑开，所以也就居中了。其实就是半行距==0，也就是两行文字会紧密依偎在一起，就是图中的③为0，为什么这么说呢？
line-height：1
qq_43654065的博客
11-27 5820
line-height：1 ，相当于line-height：100%，会根据该元素本身的字体大小设置行高，比如字体大小是15px，行高就是15px。 line-height：1.5，相当于line-height：150%； line-height：0.5，相当于line-height：50%。
CSS 关于line-height详细讲解
Q_3603的博客
09-24 2148
带你快速深入认识line-height属性！！！
jquery-实现固定层网页侧边栏在线qq客服.zip
07-11
height: auto; background-color: #f9f9f9; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } ``` 3. **jQuery代码**：引入jQuery库，然后编写JavaScript代码来处理侧边栏的...
三星9305收索
09-09
margin-top:-1px}#about_is{display:none}</style><!--[if lte IE 8]><style index="index" >#head{height:480px\9}.s_form{top:260px}</style><![endif]--><!--[if IE 8]><style index="index" >#u1 a.mnav,#u1 a....
folmura:随机生成的视觉与随机生成的公式
03-10
w/h = width/height ((width + height) / 2 is used as a stroke weight of each line) H/S/B = color (Hue/Saturation/Brightness) 每个变量都是通过随机生成的公式计算的。 该公式是使用以下功能组合生成的： v1 ...
asp结合VML写的柱状图,饼图,折线图(注:asp+VML)
03-02
xRect = (i-1)*allX\uboundY height1 = -allY * arr(1,int(i)) / arrMax height2 = -allY * arr(2,int(i)) / arrMax 'if int(i)<>i then'画柱子 v1 = arr(1,int(i)) v2 = arr(2,int(i)) call printRect(v1,...
2011东南大学计算机学院研究生复试笔试试题
05-28
sign *= -1; } return pi; } int main() { std::cout π ≈ " << std::setprecision(std::numeric_limits<double>::max_digits10) () << std::endl; return 0; } ``` **3. 编写一个递归函数模板，从一个数组...
line-height:1+overflow:hidden的奇妙反应
qq_35190388的博客
04-22 1419
个人理解字体度量、line-height和vertical-align 这几天遇到个样式问题bug，当标签设置为line-height:1;overflow:hidden，部分英文（pqg等）下半部分会被遮挡。 简单的标签结构和css属性如下，展示效果为：中文文字部分正常，英文下部分被遮挡。 <div class="contanier"> <div class="cell"> <span>我只是个文字测试，我什么都不知道</span&
CSS小课堂：一文搞懂line-height和vertical-align
zjjcchina的博客
06-30 621
我们看到，div依然和上面显示span标签时撑开了相同的高度，这是由于div自己的字体大小是100px，不论其中是不是直接写了文字，div里的图片也会有基线对齐的情况，不过图片是以其底边和父元素里的x底边对齐。我们可以看到①②的高度是一致的，所以此时span标签位置在div中是正好居中的，但是由于CSS字体在设计的时候不会正好占据内联盒子内容区的1/2处，一般来说会有一些下沉，所以文字显示效果是近似居中的。行框上边界要包裹住所有内联盒子的上边界，行框的下边界要包裹住所有内联盒子的下边界。
line-height: 1; line-height: 100%;是什么意思
m0_50080847的博客
12-30 1152
先简单看个例子： css 页面： 应该猜测出来了： line-height: 1; = line-height: 100%; = font-size: 50px; 把哪一个放到最后都是一样的。我理解的就是 等于字体高度的 1(整) 份， 或者 等于 字体高度的 100% 高度 ...
line-height的使用
weixin_34044273的博客
11-01 78
我们在将UI稿实现为页面代码时，常常强调要PixelPerfect、高精准地还原设计稿。 但我们常常会遇到这样一个问题：当我们用一个块级元素包裹文本时，会发现块级元素的高度，实际比文本的font-size尺寸还要高，导致上下形成了一些空白，进一步造成块级元素内的文本与垂直方向上相邻元素的距离变大(即：实际高度 > font-size)，实际高度由浏览器渲染机制决定，如下图： ...
基础梳理之 line-height
来啦(#^.^#)
12-06 273
line-height 一、作用 设置行间距 二、属性值 normal 默认值，大部分浏览器取1.2，取决于font-family number 无单位数值，该数字会与当前字号相乘来设置行间距【推荐使用，避免在继承时产生不确定的结果】（可理解为系数，子元素仅仅继承该系数，子元素的行间距是自身元素字号与该系数相乘的结果） length 设置固定的行间距（单位有px、em等） % 基于当前字体尺寸的...
line-height 设置为 1
weixin_30411239的博客
02-27 1125
https://stackoverflow.com/questions/1000398/what-is-line-height1 If no unit is supplied e.g."line-height: 1.5"the distance between the lines is set as this number multiplied ...
真正的能理解CSS中的line-height，height与line-height
热门推荐
一起的远方的博客
09-20 11万+
在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什...
<template> <view> <image :src="mySrc" style="width: 100%;"></image> <view class="show"> <button type="primary" @click="selectimg()">请上传户口本页面</button> </view> <view> <uni-section title="姓名" type="line"> <uni-card :is-shadow="false"> <text class="uni-body">{{personname}}</text> </uni-card> </uni-section> <uni-section title="身份证号" type="line"> <uni-card :is-shadow="false"> <text class="uni-body">6105******</text> </uni-card> </uni-section> <uni-section title="评论区" type="line" padding> <uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput> </uni-section> </view> <uni-section title="评论得分" type="line" padding> <uni-rate v-model="rateValue" @change="onChange" /> </uni-section> <view> <button type="primary">确定评论</button> </view> </view> </template> <script> export default { data() { return { mySrc: require("@/static/logo/lo3.png"), personname:"", }; }, methods: { selectimg() { uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album'], success: (res) => { console.log(res.tempFilePaths[0]); this.mySrc = res.tempFilePaths[0]; this.changeImgToBase64(res.tempFilePaths[0]); } }); }, changeImgToBase64(source_img) { uni.getFileSystemManager().readFile({ filePath: source_img, encoding: "base64", success: (res) => { console.log("加密之后的图片格式:" + JSON.stringify(res)); this.makeFinalResult(res.data); }, }); }, async makeFinalResult(base64) { let token = await uni.request({ url: 'https://aip.baidubce.com/oauth/2.0/token', data: { grant_type: 'client_credentials', client_id: '2kKeVk6LvdFX8knIyYUodMDr', client_secret: '9pSXGfzvv7q1Fo76WRkeyXVpZGrj8zxb', }, success: (res) => { console.log("获取token:===>" + res.data.access_token); token = res.data.access_token; }, }); uni.request({ url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/household_register?access_token=' + token, method: 'POST', data: { image: base64, }, header: { "Content-Type": "application/x-www-form-urlencoded", }, success: (res) => { console.log("最终的结果:" + JSON.stringify(res)); //this.personname = res.words_result.Name.words; }, }); }, }, }; </script> <style lang="scss"> .show { display: flex; justify-content: center; height: 100vh; align-items: center; } <style>
最新发布
07-20
这是一个Vue.js组件的代码，用于上传图片并进行文字识别。代码中包含了以下主要部分： 1. 模板部分：使用了Vue.js的模板语法，定义了一个视图，包含一个图片元素、一个显示区域、一些文本和按钮等。 2. 数据部分：通过data()方法定义了组件的数据属性，包括mySrc（图片路径）和personname（姓名）等。 3. 方法部分：定义了selectimg()方法，用于选择图片并显示在页面上；changeImgToBase64()方法，将选择的图片转换为base64格式；makeFinalResult()方法，通过调用百度OCR接口进行图片识别，并将识别结果赋值给personname属性。 4. 样式部分：使用了scss语法定义了一些样式。 需要注意的是，该代码中的请求地址、密钥等可能是测试用的，实际使用时需要替换为真实的接口地址和密钥。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值