.test div{width:300px;margin:15px 0;border:1px solid #000;}
.test p{margin:0;font-size:30px;}
.fixed div{line-height:20px;}
.percentage div{line-height:130%;}
.gene div{line-height:1.5;}
</style>
</head>
<body>
<ul class="test">
    <li class="fixed">
        <strong>固定数值方式：</strong> - {line-height:20px;}
        <div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div>
    </li>
    <li class="percentage">
        <strong>百分比方式：</strong> - {line-height:130%;}
        <div>
            如果是这种情况
            <p>使用百分比的方式定义line-height，与使用固定数值方式一样，也可能会引发文字重叠的现象。</p>
        </div>
    </li>
    <li class="gene">
        <strong>因子方式：</strong> - {line-height:1.5;}
        <div>
            如果是这种情况
            <p>使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。</p>
        </div>
    </li>

CSS-lineheight的更多相关文章

  1. CSS line-height概念与举例

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37 定义 两行文字基线之间的距离. 基线的大体位置 基线的位置可 ...

  2. CSS line-height应用

    一.固定高度的容器,单行文本垂直居中 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  3. CSS line-height与vertical-align:baseline

    一.当line-height与vertical-align相遇,会发生很多匪夷所思的现象 首先,请看如下代码: <!DOCTYPE html> <html> <head& ...

  4. [css] line-height

    原文:http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4 ...

  5. CSS line-height 和 vertical-align 精解（下篇）

    申明本文转自:http://hi.baidu.com/wolongxzg/item/2383860ec8ac8b173a53eeb0 vertical-align 7.4.1 语法 vertical- ...

  6. CSS line-height 和 vertical-align 精解（上篇）

    声明本文转自:http://hi.baidu.com/wolongxzg/item/a39ef8299c984283af48f5b0 line-height属性的具体定义列表如下: 语法: line- ...

  7. CSS —— line-height详解

    本文导读:“行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line-height 属性会影响行框的布局.在应用到一个块级元 ...

  8. css line-height [转]

    原文: http://www.cnblogs.com/dolphinX/p/3236686.html https://www.cnblogs.com/yangjie-space/p/4858132.h ...

  9. css line-height & 图片底部间隙的处理

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 看大牛张鑫旭的视屏可能会理解的更深一些,点击这里 . line-height 的学习 line-heigh ...

  10. css: line-height 与box-sizing

    css 1.line-hight: 行高line-height,是文本行基线这件的距离,不是字体大小,它确定了各个元素框的高度增加或减少多少. 对于块级元素:定义了元素中文本基线之间的最小距离. li ...

随机推荐

  1. 小程序云函数调用http或https请求外部数据

    参考网址 https://blog.csdn.net/qiushi_1990/article/details/101220920 小程序云函数调用http或https请求外部数据 原创编程小石头 发布 ...

  2. 夯实Java基础(二十五)——JDBC使用详解

    1.JDBC介绍 JDBC的全称是Java Data Base Connectivity(Java数据库连接).是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问(例如MyS ...

  3. leetcode 0217

    目录 ✅ 682. 棒球比赛 描述 解答 cpp py ✅ 999. 车的可用捕获量 描述 解答 c other java todo py ✅ 118. 杨辉三角 描述 解答 cpp py ✅ 258 ...

  4. [BPNN]BP神经网络概念

    BP神经网络概念 BP神经网络的计算过程: 由正向计算过程和反向计算过程组成: 正向计算过程,输入模式从输入层经隐单元层逐层处理,并转向输出层,每一层神经元的状态只影响下一层神经元的状态.如果在输出层 ...

  5. c++ 查重+排序函数

    输入 第一行n.第二行有n个元素. 输出 查重排序后的元素 样例: 输入: 5 1 1 2 3 4 输出: 1 2 3 4 unique的作用是“去掉”容器中相邻元素的重复元素 注意:用unique只 ...

  6. python中 with 的作用

    with是 Python2.5 引入的一个新语法,它是一种上下文管理协议,目的在于从流程中吧 try...except 和 finally 关键字和资源释放相关代码统统去掉,简化 try...exce ...

  7. ZOJ4102 Array in the Pocket（2019浙江省赛）

    贪心~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; int b[maxn]; int vis[maxn]; se ...

  8. 一键设置Fluent环境变量小程序

    使用视频教程优酷播放地址: https://v.youku.com/v_show/id_XNDU2MTkwNDg5Mg==.html?spm=a2hzp.8244740.0.0 一键设置环境变量小软件 ...

  9. Intellij Idea 下包建包，无论怎么建都在同一级，已解决（附图）

    1.很多新手,刚开始使用Intellij Idea的时候,项目建包都出现所建的包都在用一级. 2.这是因为,刚开始建项目的时候,Hide Empty Middle Packages是默认勾选的,只要去 ...

  10. redis介绍及搭建

    redis介绍 Redis最适合所有数据in-momory的场景,虽然Redis也提供持久化功能,但实际更多的是一个disk-backed(以写入磁盘的方式进行同步,实现持久化)的功能,跟传统意义上的 ...