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

相关文章

来自专栏数据小魔方

Xcelsius(水晶易表)系列16——自定义地图图表

今天继续跟大家分享水晶易表系列关于地图呈现的技巧——自定义数据地图。 该案例主要通过图标模拟与之前学过的动态可见性,根据数据需求,订制动态交互式地图图表。 案...

3236
来自专栏小樱的经验随笔

CTF---密码学入门第一题 这里没有key

这里没有key分值:10 来源: 西普学院 难度:易 参与人数:5577人 Get Flag:1965人 答题人数:2074人 解题通过率:95% 你说没有就没...

35811
来自专栏MixLab科技+设计实验室

从线条艺术到DIY实现一个网状体Net的js库

今天无意中看到一个可视化作品: WHAT MADE ME? INTERACTIVE PUBLIC INSTALLATION Most Original Exh...

2646
来自专栏Hongten

pygame系列_pygame的各模块叙述

在pygame中,有很多模块,每个模块对应着不同的功能,如果我们知道这些模块是做什么的,那么,对我们的游戏开发会起到关键性的作用。

762
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制

本篇作为技术分享系列的第二篇,详细讲一下文字的解析和绘制,这部分功能的研究和最终实现由团队共同完成,目前还在寻找更理想的实现方式。 首先看一下文字绘制在手绘视频...

4168
来自专栏我和未来有约会

CaseStudy(showcase)界面篇-desing设计界面

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

1637
来自专栏ytkah

通过图片定位给一张图片添加多个链接

  我们在建站的时候使用图片素材能为整个网站增色不少,但是太多的边框按钮图片会增加请求次数,从而降低网站加载速度,这时我们可以考虑将多个小图片元素集合到一张图片...

1963
来自专栏phodal

前后端分离之领域模型的思考

我们总以为前后端分离之后,我们就可以写出更干净的View。然而,现实并没有那么美好。因为在我们的View层里,不仅仅只有Template,还有Controlle...

1745
来自专栏河湾欢儿的专栏

流式布局解决方案

在真实项目中设计师给我们一般是:640960 6401136 750*1334 响应式布局的解决方案: 1>流式布局法 容器或者是盒子一般都不写...

742
来自专栏理论坞

【教程】C4D文字线立体体现

762

扫码关注云+社区