.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. codeforces round#613

    A题:输出n+1: B题: 题意:就是给n个数,a人全拿,b人拿连续的子段和,如果b人比a人大于等于的话输出NO,反之输出YES 思路:最大子段和,比赛的时候忘记 ll 和 字段和不是遇到负数就重置. ...

  2. ajax发送GET和POST请求

    1.ajax-get请求demo <script> document.getElementById("buttonname").onclik=function(){ / ...

  3. Java27个基数点

    1.JAVA中的几种基本数据类型是什么,各自占用多少字节. 2.String类能被继承吗,为什么 不能.在Java中,只要是被定义为final的类,也可以说是被final修饰的类,就是不能被继承的. ...

  4. Centos6.X安装桌面

    1.前置环境yum -y groupinstall 'X Window System'2.桌面安装 yum -y groupinstall 'Desktop' 3.语言包yum -y groupins ...

  5. 15、python面对对象之类和对象

    前言:本文主要介绍python面对对象中的类和对象,包括类和对象的概念.类的定义.类属性.实例属性及实例方法等. 一.类和对象的概念 问题:什么是类?什么是实例对象? 类:是一类事物的抽象概念,不是真 ...

  6. springboot集成过滤器

    封装自定义接口filter 包含两个方法,第一个过滤的路径数组,第二个为过滤器执行的顺序.spring boot 会按照order值的大小,从小到大的顺序来依次过滤. package com.thee ...

  7. word2vec生成后缀名model文件处理

    引入from gensim.models import word2vec 读取test02.model里面的词· model = word2vec.Word2Vec.load('test02.mode ...

  8. OA:办公自动化———笔记一

    oa:办公自动化 1.对公司结构的管理 基础数据管理         部门进行管理     角色进行管理     权限进行管理  员工进行管理   2.流程管理          利用工作流技术对比较 ...

  9. [转]利用 Commons-Fileupload 实现文件上传

    转载 Java Web开发人员可以使用Apache文件上传组件来接收浏览器上传的文件,该组件由多个类共同组成,但是,对于使用该组件来编写文件上传功能的Java Web开发人员来说,只需要了解和使用其中 ...

  10. ES5-严格模式

    在es5中可以开启一种严格模式的代码形式,开启方式是:将全局或者函数的第一条语句定义为:'use strict';. 如果浏览器不支持,会将其解析为一条普通语句,没有任何的副作用. 开启全局模式后会有 ...