css关于line-height属性

最新推荐文章于 2023-03-22 21:38:51 发布
最新推荐文章于 2023-03-22 21:38:51 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： 学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43963309/article/details/104366280
版权

line-height：
在最近的vue项目中，经常用到line-height，理解为行高，但是没有很深层次的理解，这里总结一下line-hei以及height。
概念 ：
行高是指文本行基线间的距离，所谓基线，是指“英文字母”的下端沿,如图所示
在这里插入图片描述
红线之间的距离就是行高，上行底线和下一行的顶线距离为行距，同行顶线和地此案距离为font-size大小
当font-size等于line-height时，行距 = font-size - line-height = 0；而当font-size大于line-height时，则会出现行距为负值，则两行重叠
line-height与height关系：
（1）height = line-height时
在这里插入图片描述

（2）height>line-height时
在这里插入图片描述

（3）height<line-height时
在这里插入图片描述
以下为参考链接
css-line-height
深入了解行高属性

weixin_43963309
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS深入理解之line-height
literarygirl的博客
02-12 1万+
以下文字整理自慕课网——张鑫旭的《CSS深入理解之line-height》。 一、line-height的定义 line-height，又称行高，指的是两行文字基线之间的距离，又可以称为这行文字所占的高度。 定义三问： 什么是基线？ 为何是基线？ 需要两行？ 如图红色线即为基线 基线（baseline），指的是一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。基线乃*线定义之根本！ （*线指任意线） 第3个问题，一行文字难道就没有行高吗？非也，一行文字也是有行高的，两行的定义已
项目使用中vue知识点整理
学会改变的博客
07-06 528
@符号代表的是vue项目的src目录 import HelloWorld from '@/components/HelloWorld' vue组件的template对外只能暴露一个标签，所以最外层得用一个div进程包裹 写移动端访问页面的时候，需要做一些初始配置 不允许手指放大 需要在index.html页面的meta标签进行补充 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-sc.
vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题
qq_40509733的博客
05-20 296
vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题 建议采用 弹性布局的方式 实现居中 display:flex; align-items:center; justify-content:center;
vue-quill-editor 富文本编辑框 —— 自定义行高
且听风吟的博客
11-01 4495
vue-quill-editor 富文本编辑框 —— 自定义行高一、创建样式文件：二、在vue文件中导入样式对象：三、工具栏配置：配置行高参数：配置行高响应函数：四、注册样式：监听ready事件：注册`lineHeightStyle `：五、通过css给行高添加标题以及样式：页面效果：完整代码： 一、创建样式文件： 创建一个lineHeight.js，在里实例化一个lineHeightAttributor对象： import Quill from "quill"; const Parchment = Qui
2021-08-06随记(vertical-align, 顶线、底线、中线、基线，vue原理理解)
qq_38301396的博客
08-06 553
20210804 (vertical-align, 顶线、底线、中线、基线，vue原理理解) vertical-align 父元素是inline或者是table-cel，如果是inline-block或者block则必须要设置line-height(和高度一样)子元素为inline或者inline-block才可以，vertical-align属性不继承，必须单独设置 顶线、底线、中线、基线 顶线：汉字的最顶部 底线：汉字的最底部 中线：英文x的中部 基线：英文x的底部 行高，行距，
vue富文本添加行高控制
weixin_43837268的博客
03-22 1083
在编辑器的 ready 事件响应函数中注册。五、通过css给行高添加标题以及样式。
Vue学习日记39
NLP工程化
02-18 987
1.line-height属性 解析：使用百分比设置行高： [1]normal：默认。设置合理的行间距。 [2]number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 [3]length：设置固定的行间距。 [4]%：基于当前字体尺寸的百分比行间距。 [5]inherit：规定应该从父元素继承line-height属性的值。 2.text-align-last属性 解析：规定如何对齐文本的最后一行。 3.overflow属性 解析：overflow属性规定当内容溢出元素框时发生的事情。 [1]v
line-height的用法，负margin的危害，路由传参，修改单个页面颜色，背景图虚化
juvialoxer的博客
07-07 358
一. vue.esm.js?a026:628 [Vue warn]: Error in render: “TypeError: Cannot read property ‘length’ of undefined” 这是由于res.Data是无数据为undefined的，所以找不到 res.Data.length。 因此我们可以使用form.checkVal !== undefined来规避这个错...
CSS中line-height属性的值分别代表什么
weixin_51747462的博客
09-14 1080
CSS中line-height属性的值分别代表什么；line-height: 1.5
如何修改<p>标签中的行间距
weixin_30505751的博客
04-04 833
代码如下 显示如下 那么如何解决这个问题呢？ 可以在p标签的css样式中加入 “line-height:30px;”,30px不是固定值，可是任意值，这样显示结果如下： 转载于:https://www.cnblogs.com/august-8/p/4391296.html...
关于css中line-height(行高)设置无效的问题的解决方法
12-13
关于css中line-height(行高)设置无效的问题 我们先写下这一串代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style ...
CSS教程：行高line-height属性(1)
12-10
相关文章：CSS教程：行高line-height属性（2） 行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整...
css line-height属性的使用技巧
12-13
css中用于设置行高的属性，line-height属性。 第一，对CSS3的选择器和类似header、nav、footer等标签不兼容，在不使用插件和JS处理的情况下，从纯CSS的角度来切入，可以采用类名来做定义，这是常用的替代方案。 项目...
vue踩坑之报错Error in nextTick: "InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ''
weixin_43963309的博客
04-29 5932
Error in nextTick: "InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘’ is not a valid attribute name." 这个错误是在template中出现了‘’符号 可能使用的不对 在上下文去找到这个地方 修改就 OK了 ...
vue项目如何设置某节点的最小高度
weixin_43963309的博客
02-06 2632
vue项目如何设置某节点的最小高度 在本项目中，需要给一个dom设置最小高度 最小高度=页面的高度 - 上一个节点到页面顶部的高度 首先 在methods里面设置一个方法 getRightHeight() { // 获取页面高度 let temp = document.getElementsByClassName('xxx')[0].offsetHeight // 获取heade...
ios对时间getTime()不兼容 导致undefined问题
weixin_43963309的博客
03-23 925
在项目中需要获取一个时间戳，使用了new Date(time),安卓手机上可行，但在苹果手机上显示undefined，在谷歌浏览器的控制台打印出来，后来发现是ios对new Date()函数不兼容，主要是时间格式为：2019-3-21 12:00:00 在苹果上获取时间戳有兼容性问题 ，需要转换成 2019/3/21 12:00:00 才可以正确获取到时间戳。而安卓对两种数据格式都兼容 2019-11-09 10:13:21 2019/11/09 10:13:21 解决办法：let t = new Da
手机号脱敏处理
weixin_43963309的博客
03-24 559
let len = num.length if (len && len > 4) { return num.substring(0, 3) + '****' + num.substring(len - 4, len) } }
数组循环失效问题
weixin_43963309的博客
05-13 551
问题： 当在服务端获取到数据时，将其里面的属性值赋值到list里面，代码如下： if (res.code === 0) { console.log(res.data, 'ioio') res.data.forEach((item, index) => { this.list[index].text = item.enterprise_name this.list[index].value = i
如何去除 css 的 line-height 属性
最新发布
04-30
你可以将该元素的 `line-height` 属性设置为 `normal`，这将使它采用默认的行高，不受任何特定值的影响。例如： ```css .element { line-height: normal; } ``` 如果你想为该元素设置一个特定的行高，但不想使用默认值，你可以将 `line-height` 属性设置为一个无单位的数字值，例如： ```css .element { line-height: 1.5; } ``` 这将将该元素的行高设置为其字体大小的 1.5 倍。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值