line-height属性总结

 line-height属性的继承性:

子元素不设置line-height时,

在父元上设置带单位的值和百分比时会先计算父元素的line-height大小然后继承过来,在父元素上设置无单位的数值时,子元素会继承这个值,然后将这个值乘以子元素的font-size,得到line-height

line-height为normal时:

normal的情况为默认值,浏览器会计算出“合适”的行高,多数浏览器(Georgia字体下)取值为1.14,即为font-size的1.14倍,如果未设定font-size,那既是基准值16px的1.14倍 单独讨论这个取值是没什么意义的,因为normal和具体的数值相比,会因为字体的不同而不同 如果是项目需要,还是给定一个值好一些

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <div class="lh1">
        <p>行高1</p>
    </div>

    <div class="lh2">
        <p>行高2</p>
    </div>
    
    <div class="lh3">
        <p>行高3</p>
    </div>
</body>
</html>
        .lh1{
            font-size: 20px;
            line-height: 2em;
            background: red;
        }
        .lh2{
            font-size: 20px;
            line-height: 2;
            background: green;
        }
        .lh3{
            font-size: 20px;
            line-height: 200%;
            background: blue;
        }
        p{font-size:12px;}

结果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴老师移动开发

Flutter TextStyle参数解析关于学习

2061
来自专栏知晓程序

开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

1424
来自专栏小李刀刀的专栏

深入解析CSS样式层叠权重值

读到《重新认识CSS的权重》这篇,鬼哥在文章最后给出了便于记忆的顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪...

3376
来自专栏偏前端工程师的驿站

CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

前言                                   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,...

2387
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

1645
来自专栏Golang语言社区

【Go 语言社区】HTML5 canvas验证码识别

canvas 的历史这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把...

4904
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

Painter采用单例模式 优化原型模式,各Shape采用深拷贝来解决构造较长、繁琐的情况 比较new 对象和拷贝的效率问题,拷贝一点。具体见文:来谈谈Ja...

1523
来自专栏向治洪

android绘制虚线

有的时候我们需要一种虚线效果,比如图片的边框,愤怒的小鸟的飞翔路径,那么怎么绘制这些虚线呢?方法很多,目前我觉得好的有两种: 一、自己创建模式,一个点一个点的绘...

2586
来自专栏进击的君君的前端之路

CSS理解之border

1703
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(二)文本、标签、特性

当多个样式作用于同一个(同一类)标签时,样式发生了冲突,总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。

1086

扫码关注云+社区

领取腾讯云代金券