.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. c语言中的qsort用法

    1.首先了解 int cmp(const void* a, const void* b) 表示声明cmp函数,其返回值为int型,参数为两个不可修改(const)的void型指针 2.函数原型 函数声 ...

  2. vue.js_①

    前言: Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...

  3. redis-key管理

    redis-key管理 1.      redis key 本章主要内容为redis key级别的操作命令. 参考文档:https://redis.io/commands 1.1.    Redis ...

  4. 登陆页面的Sql注入

    自己手工注入的知识比较薄弱,这里就记录一下注入过程 题目: .登陆页面,使用sql万能密码可以登陆账号,但是flag不会自己跳出来,出题人是想让我们手工注入 常用万能密码: 'or'='or' adm ...

  5. C程序的执行和当前进程的结束

    内核使程序执行的唯一方法,就是调用exec函数,这个函数又会启动一个C程序启动例程,这个启动例程是C程序的启动地址.负责调用main函数,并接受mainn函数的返回值. 使得进程结束的唯一方式是隐式的 ...

  6. vue配置、创建项目及运行

    首先安装Node.js, npm i -g cnpm --registry=https://registry.npm.taobao.org 安装镜像 安装以后cnpm可以代替npm cnpm i -g ...

  7. Educational Codeforces Round 69 (Rated for Div. 2)D（DP，思维）

    #include<bits/stdc++.h>using namespace std;int a[300007];long long sum[300007],tmp[300007],mx[ ...

  8. eclipse问题集合

    [eclipse更换jdk版本]

  9. 线程安全Collections.synchronizedList

    ollections.synchronizedList引发的线程安全问题 有些容器是线程安全的(Vector,ConcurrentLinkedQueue等),有些则不是(list等),利用类 似 pr ...

  10. FFmpeg RTSP流通过UDP传输问题

    我自己在使用SRS服务的Ingest功能时发现在读取一个网络摄像头的RTSP流时一直不成功, 具体分析后发现SRS在调用FFmpeg时出了问题: /usr/local/ffmpeg/bin/ffmpe ...