.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. 重新梳理IT知识之java-03循环

    引用变量时要给变量赋值,如果循环进不去就会报错. 一.循环结构的四要素 1.初始化条件 2.循环条件 ---> 是Boolean类型 3.循环体 4.迭代条件 说明:通常情况下,循环结束都是因为 ...

  2. 疫情对国内5G发展的影响

    导读 2020年春节期间,“新型冠状病毒”引发了自SARS之后又一次全国性疫情,而世卫组织也将之列为国际关注的突发公共卫生事件,随后多国发布了针对中国的旅行警告和入境限制,从当前情况来看,疫情对中国各 ...

  3. php的注释、变量、类型、常量、运算符、比较符、条件语句；

    php的注释 1.// 2.# 3./*  */ 变量 变量是储存信息的容器: 变量规则: 1.变量以$开头,后面跟名称>>>$sum; 2.变量必须以字母或下滑先开头,不能用数字开 ...

  4. Docker容器的操作命令

    Docker容器的操作命令 写该文章时候的初衷是在使用Docker for windows 的时候遇到的一些问题.起初我在运行好docker客户端以后,创建了一个.NET Core应用发布到docke ...

  5. 前端开发：javascript中的面向对象

    前端开发:面向对象与javascript中的面向对象实现(一) 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理解 ...

  6. day04-MyBatis的注解开发

    单表的CRUD注解开发: User实体类: package com.zyb.pojo; import java.io.Serializable; import java.util.Date; publ ...

  7. 二分查找及几种变体的Python实现

    1. 在不重复的有序数组中,查找等于给定值的元素 循环法 def search(lst, target): n = len(lst) if n == 0: return -1 low = 0 high ...

  8. MongoDB的分片数据库命令总结

    sh._adminCommand 在admin数据库运行database command ,就像db.runCommand() ,不过可以保证只在 mongos 上运行. sh._checkFullN ...

  9. 树莓派4B踩坑指南 - （2）安装系统及初始化

    安装系统及初始化 格式化TF卡:SDFormatter 4.0.如果需要换系统,则必须先烧录进一个空img,然后再格式化! 烧录系统:Win32DiskImager-0.9.5 更改默认密码:账号pi ...

  10. 38 java 使用标签跳出多层嵌套循环

    public class Interview { public static void main(String[] args) { //使用带标签的break跳出多层嵌套循环 Boolean flag ...