line-height的五种赋值的方式

最新推荐文章于 2023-01-13 19:40:20 发布
最新推荐文章于 2023-01-13 19:40:20 发布
阅读量601 收藏 1
点赞数 1
分类专栏： 每天一个知识点，丰富我的大前端 文章标签： line-height的五种赋值的方式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44368573/article/details/101555777
版权

line-height

line-height的五种赋值的方式
1、line-height:nomal; 取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为1.2，这取决于元素的 font-family。
2、line-height:1.5; //(font-size * 1.5)
3、line-height:2em; //(font-size * 2)
4、line-height:200%; // (font-size * 2)

Q：为什么一般把line-height的值设为1.5类型的?
区别：(有继承时)
使用1.5 -> 表示当前line-height的值就等于（子元素的font-size*1.5）
若使用150%或者1.5em->子元素的line-height的值为（父元素的font-size*1.5)

韭菜小姐
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
在Vue项目中引用SVG文件并给SVG内部元素赋值是一个常见的需求，特别是在处理复杂的SVG图形时。本篇文章将详细介绍如何实现这一目标。 首先，我们需要理解SVG（Scalable Vector Graphics）是一种基于XML的矢量图像...
关于line-height属性值的不同写法
繁华的博客
03-22 1177
1. line-height:150%;行高=字号 * 150%  ； 当父元素设置line-height:150%，子元素没有设置行高的情况下，子元素会继承父元素的行高， 子元素行高 = 父元素字号 * 150%；<div class="parent" style="font-size:20px;line-height:150%;"> <div class="child...
CSS line-height 三种赋值方式有何区别 (琐碎知识点整理)
黑木令之佛性
06-19 3982
之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。 好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 1. 带有单位的 line-height 会被计算成 px 后继承 。 2. 子元素的 line-height = 父元素的 line-he
对line-height 的理解及其赋值方式
y_l33的博客
01-13 466
对line-height 的理解及其赋值方式
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三种赋值方式有何区别？（带单位、纯数字、百分比）
love_programmer的博客
12-30 578
line-height三种赋值方式有何区别？（带单位、纯数字、百分比） a.带单位：px不用计算，em则会使元素以其父元素font-size值为参考来计算自己的行高 b. 纯数字：把比例传递给后代，例如父级行高为1.5，子元素字体为18px，则子元素行高为1.5*18=27px c. 百分比：将计算后的值传递给后代 ...
网站时间显示.rar
07-05
line-height: 50px; font-family: 'Times New Roman', Times, serif; font-size: 24px; color: #666; } ``` 这段CSS代码定义了一个名为`.time-block`的样式，用于显示时间的每个部分（小时、分钟和秒）。它设置...
Angular中ng-options下拉数据默认值的设定方法
08-30
line-height:1.4; border-radius:4px; border:1px solid #ccc; color:#555;" ng-model="editCourse.TeacherName" ng-options="Teacher.UserName for Teacher in TeacherList" required> 选择教师 ``` ...
HTML5-canvas:工作画布基础知识
07-10
这些方法包括`fillRect()`（填充矩形）、`strokeRect()`（描边矩形）、`beginPath()`（开始路径）、`moveTo()`（移动到某点）、`lineTo()`（画线到某点）、`arc()`（画圆弧）等，用于创建各种形状和线条。...
HTML5 canvas绘制涂鸦画板.zip
07-04
为了实现颜色选择，我们可以创建一个颜色选择器，比如一个调色板，用户点击不同的颜色块时，将选中的颜色赋值给`strokeStyle`。 此外，这个涂鸦画板可能还包含了保存和加载画作的功能。保存功能通常会将canvas画布...
CSS行高line-height默认值normal以及line-height与盒子的关系
dreamer_zhou的博客
09-20 8568
CSS行高line-height默认值normal以及line-height与盒子的关系
line-height中的五种取值方式和继承
qq_44950078的博客
12-15 1338
取值 一般情况下，浏览器默认的line-height为1.2。可以自定义 line-height 覆盖这个初始值，那么该怎样设置line-height呢？有以下5种方式： 值 描述 normal normal number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父元素继承 line-height 属性的值。 继承
[css] 说下line-height三种赋值方式有何区别？
歌谣的博客
02-24 3002
[css] 说下line-height三种赋值方式有何区别？ line-height 可以有带单位及不带单位的写法（感觉其实是两种）。 div{ line-height: 24px; line-height: 1.5; line-height: 1.5em; line-height: 150%; } 对于应用在单个元素上，这几种写法的效果都是一样的（除了 px 需要一些计算）。但由于 line-height 是可以被继承的，因此会影响内部子元素的 line-height。简单的可以总结为：
css基础--line-height二
chujinmaolu的博客
06-18 643
1、坊间流传着这么一种说法：“要想让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了“。 .title { height: 24px; line-height: 24px; } 误区之一：要让单行文字垂直居中，只需要line-height这一个属性就可以，与height一点儿关系都没有。也就是说，我们直接 .title { line-height: 24px; } 就可以了，坊间传闻的说法会误导大小一定要同时设置height属性才可以。 误区二：行高
真正的能理解CSS中的line-height，height与line-height
热门推荐
一起的远方的博客
09-20 11万+
在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什...
line-height 百分比和数值设置行高
JiM-W 的博客
01-14 1万+
line-height
line-height各类值选择
GANKB的博客
01-30 411
line-height取值分为以下几类 line-height:normal; line-height:1.5; line-height:30px; line-height:200%; line-height:20em; 各类取值涉及继承问题 body{ font-size:20px; line-height:1.5; } p{ font-size:16px; } 此时p标签继承的行高为 16px*1.5 body{ font-size:20px; line-height:200%; } p
CSS中line-height属性
qq_42526440的博客
01-06 2239
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
34、CSS高频前端面试题之CSS基础
sunnnnh的博客
06-07 1470
目录 一、CSS基础 1. CSS选择器及其优先级 2、CSS中可继承与不可继承属性有哪些 2.1 无继承性的属性 2.2 有继承性的属性 3、display的属性值及其作用 4、display的block、inline和inline-block的区别 5. 隐藏元素的方法有哪些 6. link和@import的区别 7. transition和animation的区别 8、对盒模型的理解 9、为什么有时候⽤translate来改变位置⽽不是定位？ 10、li 与 li ...
10:35:56.822 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 10:35:56.830 SassError: Undefined variable: "$u-form-item-height". 10:35:56.830 on line 210 of D:\ideaWorkSpace\ehl-wx\applicationCenter\knowledgeBase\addQuestion.vue 10:35:56.839 >> line-height: $u-form-item-height; 10:35:56.848 ------------------^ 10:35:56.856 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 10:35:56.863 SassError: Undefined variable: "$u-form-item-height". 10:35:56.873 on line 220 of D:\ideaWorkSpace\ehl-wx\applicationCenter\examine\answerQuestion.vue 10:35:56.873 >> line-height: $u-form-item-height; 10:35:56.880 --------------------^ 10:35:56.880 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 10:35:56.889 SassError: Undefined variable: "$u-form-item-height". 10:35:56.896 on line 220 of D:\ideaWorkSpace\ehl-wx\applicationCenter\knowledgeBase\answerQuestion.vue 10:35:56.903 >> line-height: $u-form-item-height; 10:35:56.904 --------------------^ 10:35:56.913 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 10:35:56.913 SassError: Undefined variable: "$u-form-item-height". 10:35:56.921 on line 232 of D:\ideaWorkSpace\ehl-wx\applicationCenter\examine\addQuestion.vue 10:35:56.930 >> line-height: $u-form-item-height; 10:35:56.930 ------------------^ 10:35:56.938 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loader/dist/cjs.js): 10:35:56.938 SassError: Undefined variable: "$u-form-item-height". 10:35:56.946 on line 350 of D:\ideaWorkSpace\ehl-wx\pages\service\addService.vue 10:35:56.947 >> line-height: $u-form-item-height; 10:35:56.954 -------------------^解决
最新发布
07-14
这个错误是因为在编译过程中找不到Sass变量"$u-form-item-height"。要解决这个问题，你可以按照以下步骤进行操作： 1. 确保你已经正确引入了uview-ui组件，并且按照官方文档的要求进行了配置。 2. 检查你的项目中是否已经安装了Sass相关的依赖。可以通过运行`npm install sass-loader node-sass`来安装这些依赖。 3. 确保在你的项目中正确配置了Sass的loader。可以在项目的webpack配置文件或vue.config.js文件中添加相应的配置，确保Sass能够正确加载和解析。 4. 检查一下uview-ui版本和你当前项目的版本是否兼容。有时候不同版本之间可能会有变量命名的差异，需要进行相应的调整。 5. 如果以上步骤都没有解决问题，可以尝试手动定义变量"$u-form-item-height"并给它赋值。你可以在项目中的Sass文件或者全局样式文件中添加以下代码： ```scss $u-form-item-height: xxxpx; // 替换为你想要的高度值，如 "40px" ``` 替换 "xxxpx" 为你想要的高度值。然后重新编译项目，看看是否解决了问题。 如果问题仍然存在，建议查看uview-ui的官方文档或在相关社区寻求帮助，以获取更详细的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值