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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

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

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

4354
来自专栏前端萌媛的成长之路

CSS选择器的优先级

1594
来自专栏小灰灰

cocos2dx-v3.4 2048(四):单元格的设计与实现

前言 ---- 单元格即显示2、4、8等数字的不同颜色的方格,如下图。本项目中Grid类实现单元格的相关内容,包括数字、背景更新,移动、新增、消除特效 ? ...

1946
来自专栏coding for love

CSS进阶05-行内格式上下文IFC

IFC的英文全称是:Inline Formatting Contexts,直译为“行内格式化上下文”。 IFC由一个不包含块级盒的块容器盒生成。 在行内格式...

983
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

1422
来自专栏知晓程序

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

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

1264
来自专栏向治洪

android绘制虚线

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

2286
来自专栏天天

框架设计续集(三)

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

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

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

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

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

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

2297

扫码关注云+社区