.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. java web第一次课堂测试1

    ---恢复内容开始--- 要求如图: 本程序包括四个文件,一个显示界面的jsp文件,一个dao层文件,一个servlet层文件 一个连接数据库的文件 下面依次附上代码: 前端界面: <%@ pa ...

  2. dojo框架笔记

    一.模块定义 1.定义只含值对,没有任何依赖的模块(moudle1.js) define({ color: "black", size: "unisize" } ...

  3. Math 用法

    console.log(Math.abs(-5)) 取绝对值 console.log(Math.round(5.1)) 取四舍五入 5.5 为中间值 取5 console.log(Math.ceil( ...

  4. Linux查看当前系统32位还是64位

    getconf LONG_BIT 此方法会直接返回32或64

  5. wpf表单验证

    在做表单的,需要对User提交数据做验证,wpf与silverlight 都提供自带的验证机制,但是只是验证,并不能在提交时提供详细的信息,此时可使用 依赖属性将错误信息整合进自定义错误集合中,即可在 ...

  6. jsp分割字符串并遍历

    1.先引入JSTL库 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> ...

  7. 1146. Snapshot Array

    Implement a SnapshotArray that supports the following interface: SnapshotArray(int length) initializ ...

  8. 03.Scala编程实战

    Scala编程实战 1.    课程目标 1.1.  目标:使用Akka实现一个简易版的spark通信框架 2.    项目概述 2.1.   需求 Hivesql----------> sel ...

  9. nodeJS - 定义全局变量

    定义 : global.变量名=‘xxxx’; 取出 :    global.变量名

  10. js中数值各进制之间的转换

    十进制转换为二进制 toString()方法可把一个 Number 对象转换为一个字符串,并返回结果.语法如下: NumberObject.toString(radix); 其中,radix为可选.规 ...