CSS行高line-height:2和line-height:200%的区别

于 2023-05-18 14:58:15 发布
阅读量433 收藏 1
点赞数
分类专栏： 杂文笔记 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winkexin/article/details/130747303
版权

行高line-height:2和line-height:200%他们的意思都表示了行高是字体大小的2倍，那么是否有区别？

答案是肯定是：有

当它们写在父容器中时，子元素的字体大小不一样的时候，区别就体现出来了。

line-height: 2 写在父容器中，

那么子元素的行高都是自身高度的2倍，是相对大小。子元素的字体大小不同，行高也会不同。

line-height:200%；写在父容器中

那么浏览器会立刻计算出行高的具体值，假如父容器的默认字体大小是40px，那么计算得到的行高就是2×40px=80px，子元素的行高都会继承这个32px，是固定大小。

子元素的字体大小不同，行高都是固定某个值。

DEMO1：line-height行高为百分比的时候 200%

源码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>行高演示-<a href="http://www.bbsxiaomi.com" target="_blank" class="infotextkey">小米技术社区</a>www.bbsxiaomi.com</title>

    <style>

        *{margin:0;padding:0;}

        .a {

            font-size: 40px;

            line-height: 200%;

        }

        .b {

            font-size: 80px;

        }

    </style>

</head>

<body>

    <div class="a">

        <div class="b">你好啊</div>

    </div>

</body>

</html>

效果：line-height行高为80px，也就是在line-height:200%的时候，子div b继承了父div a的行高

DEMO2：line-height行高为数字的时候 2

源码：仅修改.a的css，line-height: 200%;改为line-height:2;

1

2

3

4

.a {

            font-size: 40px;

            line-height: 2;

        }

执刀人的工具库
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS教程：行高line-height属性(2)
12-11
相关文章：CSS教程：行高line-height属性(1) 7.3.3行高的计算与继承 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下： 字高20px，行高2em。</p> 字高30px，行高2em。 2个段落的行高都...
CSS教程：行高line-height属性(1)
12-10
相关文章：CSS教程：行高line-height属性（2） 行高的概念看上去很简单——文字行的高度，其实，行高所涉及到的基础知识，对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味，因此适当地调整...
浅谈CSS中line-height:200% | 2.0em | 2.0 的区别
筱葭的博客
03-13 1679
父元素子元素 ①　父元素的行高为150%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时，子元素的行高等于16px * 150% = 24px。 ②　父元素的行高为1.5em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时，子元素的行高等于16px * 1.5em = 24px。 ③
line-height:2、line-height:2em、line-height:200%的区别
weixin_30254435的博客
02-16 440
文章来源： 　　http://www.zhihu.com/question/20394889 总结： 　　1、line-height:2em、line-height:200% 　　　 根据父元素的字体大小计算行高 子元素继承父元素计算后的行高，如果子元素的字体很大，而父元素字体小，这样计算出来的行高有可能无法容量子元素的显示，会被截掉。 2...
css世界读书笔记->line-height（2）
qq_34241037的博客
04-19 130
line-height 可以影响替换元素（如图片高度）嘛？ 不可以 1.对于纯文本元素，line-height非常威风，直接决定了最终的高度； 2.但是如果同时有替换元素，line-height的表现一下子弱了很多，只能决定最小高度； 原因是： 1.替换元素的高度不受line-height影响； 2.vertical-align属性在作祟 line-height 可以影响块级元素吗？...
line-height:2和line-height:2em的区别，它们是有区别的
weixin_30266829的博客
08-07 494
line-height:2是2倍的意思，如果内部有不同大小文字的情况下，以最大文字为倍数。line-height:2em也是2倍文字大小的意思，但如果内部有大文字，它还是会以父容器的大小来计算。请看如下代码： <!doctype html> <html> <head> <meta charset="utf-8"> <tit...
css3响应式设计
sixteen_cicle的博客
10-26 444
说明：手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中 width     设置layout viewport  的宽度，为一个正整数，或字符串"width-device" initial-scale     设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale     允许用户的最小缩放值，为一个数字，可以带小数 maximum-scal
关于css中line-height(行高)设置无效的问题的解决方法
12-13
然而，在某些情况下，我们可能会遇到`line-height`设置无效的问题，这通常与CSS的解析顺序和优先级有关。本文将深入探讨这个问题，并提供解决方法。 首先，`line-height`属性的目的是为了控制元素内部行与行之间的...
全面了解css行高line-height的用法
09-24
CSS中的`line-height`属性是用于设置元素内部行与行之间的垂直间距，它对文本的可读性和布局的美观性有着重要影响。行高不仅决定了文本行之间的距离，还参与了元素内行框的布局计算。 一、`line-height`语法 `line-...
CSS行高line-height的个人理解
09-25
“行高“顾名思义指一行文子的高度，大家对CSS行高line-height都有自己的理解，下面为大家介绍下本人自己的理解
css基础--line-height二
chujinmaolu的博客
06-18 645
1、坊间流传着这么一种说法：“要想让单行文字垂直居中，只要设置line-height大小和height高度一样就可以了“。 .title { height: 24px; line-height: 24px; } 误区之一：要让单行文字垂直居中，只需要line-height这一个属性就可以，与height一点儿关系都没有。也就是说，我们直接 .title { line-height: 24px; } 就可以了，坊间传闻的说法会误导大小一定要同时设置height属性才可以。 误区二：行高
css中line-height属性,CSS line-height 属性
weixin_36337756的博客
08-03 824
属性定义及使用说明line-height 设置以百分比计的行高。注意：负值是不允许的默认值：normal继承：yes版本：CSS1JavaScript 语法：object.style.lineHeight=”2″属性值值描述normal默认。设置合理的行间距。number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inher...
7.3 行高：line-height属性[2]
猫沙盆
06-21 2236
7.3.3 行高的计算与继承 以em、ex和百分比为单位的行高，其基数是元素本身的字体尺寸。例如有代码如下： 字高20px，行高2em。 字高30px，行高2em。2个段落的行高都为2em，但是字体大小不同，因此显示如图7-23所示。   图7-23 行高的计算 行高可以设定得比字体高度小，此时多行的文字将叠加到一起，例如有如下代码，其显示如
真正的能理解CSS中的line-height，height与line-height
热门推荐
一起的远方的博客
09-20 11万+
在最近的项目中，常常用到line-height，只是简单的理解为行高但并没有深层次的理解，致使不能达到信手拈来的感觉。在此做一下总结，一是更深层次的了解什么是line-height，二是比较height与line-height的区别。 基本概念 行高与行距从字面的意思是非常容易理解的，但是对布局和样式来说，我们应该更深入的理解各个属性之间的关系，比如line-height与font-size存在什...
line-height的使用
Z__XY_的博客
01-12 2305
line-height
CSS line-height 和 vertical-align 精解（上篇）
老任物联网杂谈的专栏
12-27 1216
line-height属性的具体定义列表如下： 语法： line-height : normal | | | | inherit 说明： 设置元素中行的高度。 值： normal：默认行高，一般为1到1.2； 实数：实数值，缩放因子； 长度：合法的长度值，可为负数； 百分比：百分比取值基于元素的字体尺寸。 初始值： normal 继承性： 继承 适用于： 所有元素 媒体：
【line-height】 line-height详解
03-27 1万+
本文摘自不同文章，楼主自己汇总集合，对比概念，相对比较全面。 楼楼自己的博客：http://blog.csdn.net/taotao6039 原文1，http://www.woaicss.com/article/div/line-height.htm 原文2，http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98
css行高line-height的一些深入理解及应用
从入门到放弃
08-23 2366
一、前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”，是个不错的文章，学到了不少东西，建议您看看。 这里，我也要讲讲我对line-height的一些理解，所讲解的东西绝大多数与上面提到的“深入理解css 行高”是不重复的，可以说是补充或是另外一个角度的思考。另外，将结合实际，展示line-height的一些特性和一些常见应用，帮助您对css行高line-height...
line-height:
最新发布
12-22
line-height属性用于设置行高，即行与行之间的垂直间距。它可以应用于文本元素，如段落、标题等。line-height可以使用不同的单位进行设置，如像素(px)、百分比(%)、em等。 以下是一些line-height的示例： 1. 使用像素(px)单位设置行高： ```css p { line-height: 20px; } ``` 2. 使用百分比(%)单位设置行高： ```css h1 { line-height: 150%; } ``` 3. 使用em单位设置行高： ```css span { line-height: 1.5em; } ``` 请注意，line-height的值可以是一个具体的数值，也可以是一个相对值。相对值会根据元素的字体大小进行计算。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执刀人的工具库

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值