.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. 学习笔记（5）- ubuntu对话语料

    The Ubuntu Dialogue Corpus: A Large Dataset for Research in Unstructured Multi-Turn Dialogue Systems ...

  2. 一个IP与多个域名绑定

    方法一:通过端口区分 方法二:通过serverName区分(推荐) 1.httpd.conf打开 virtual host虚拟主机配置 2.httpd-vhost.conf 添加配置 <Virt ...

  3. 第七节：Vuejs路由交互及后台系统路由案例

    一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...

  4. JavaScript - __proto__和prototype，原形

    参考 https://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript 区别 构造函数中的prototype创建 ...

  5. 在iOS项目中，这样才能完美的修改项目名称

    https://www.cnblogs.com/liangyi-cn/p/8657474.html 前言: 在iOS开发中,有时候想改一下项目的名字,这会遇到很多麻烦. 直接改项目名的话,Xcode不 ...

  6. Swift3.0-基本运算符

    一.简介 运算符是检查.改变.合并值的特殊符号或者短语.在本篇文章中只介绍基本运算符,Swift中包含的高级运算符(比如溢出运算符)不在其中.Swift中的运算符和OC中的运算法还是有比较大的区别的, ...

  7. 下载安装charles并导入证书、使用

    抓包原理 1.截获真实客户端的 HTTPS请求,伪装客户端向真实服务端发送 HTTPS 请求. 2.接受真实服务器响应,用 Charles 自己证书伪装服务端向真实客户端发送内容 3.证书导入 看博客 ...

  8. python基础之省份三级菜单

    菜单 menu = { #定义一个字典 '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家 ...

  9. Python环境搭建-5 代码编辑器

    代码编辑器 Python解释器.pip工具箱和virtuanlenv虚拟环境都安装好了后,基本的Python环境就搭建好了,可以开始我们的"搬砖"之旅了.但是现在还缺一个好用的编辑 ...

  10. 3_05_MSSQL课程_Ado.Net_DataSet数据集

    //创建一个内存的数据集 DataSet ds=new DataSet("LJK"); //创建一张内存表 DataTable dt01=new DataTable("d ...