一、line-height语法

line-height属性的具体定义列表如下：

语法： line-height : normal | <实数> | <长度> | <百分比> | inherit

说明： line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

可能的值：

值 说明
normal 默认,设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

二、line-height中顶线、中线、基线、底线的实例说明

 
HTML 代码   复制

<!DOCTYPE html>


<html>


    <head>


        <title>Test</title>


        <style type="text/css" >

            span

            {

                padding:0px;

                line-height:1.5;

            }

        </style>

    </head>

    <body>

        <div class="test">

            <div style="">

                <span style="font-size:3em;">中文English</span>

                <span style="font-size:3em;">English中文</span>

            </div>

        </div>

    </body>

<html>

图示说明

从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。

尤其记得基线不是最下面的线，最下面的是底线。

三、line-height中行高、行距与半行距

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

图片说明

四、line-height中内容区、行内框、行框

内容区：底线和顶线包裹的区域，即下图深灰色背景区域。

行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）

行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

例如

<div style="">


                <span style="font-size:1em;">中文English</span>


                <span style="font-size:3em;">中文English</span>


                <span style="font-size:3em;">English中文</span>


                <span style="font-size:1em;">English中文</span>


            </div>

图片说明

五、定义line-height的方式

1、line-height可以被定义为normal。

2、line-height可以被定义为继承

p { line-height:inherit; }

3、line-height可以使用一个百分比的值

p { line-height:120%; }

4、line-height可以被定义为一个长度值（单位px、em等）

p { line-height:20px; }

5、line-height也可以被定义为纯数字（甚至没有单位）

p { line-height:1.2; }

css行高line-height的用法的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. 【转】css行高line-height的一些深入理解及应用

    一.前言 前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解,所讲解的东西绝大多 ...

  3. CSS行高——line-height 垂直居中等问题

    CSS行高——line-height   初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个sty ...

  4. css - 行高

    css - 行高 line-height行高 取值:px | em | rem | 百分比 | 纯数字 | normal | inherit 设置给:块.行内.行内块 应用给:文本 继承:块.行内.被 ...

  5. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  6. CSS行高--line-height

    遇到的问题:在css中,不理解line-height:1与line-height:1px的区别 发现的过程:最近在学做一个网站的过程中,设置两行文字之间的行高时需要用到line-height,发现了这 ...

  7. css行高line-height的用法（转）

    本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块 ...

  8. css行高的用法总结

    css没有提供一个直接设置行间距的方式,所以只能通过设置行高来间接的设置行间距,行高越大行间距就越大,用 line-height 来设置行高. .p1 { /* 设置行高 */ line-height ...

  9. CSS行高line-height的学习

    一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置 ...

随机推荐

  1. scrapy学习-爬取天天基金网基金列表

    目录 描述 环境描述 步骤记录 创建scrapy项目 设置在pycharm下运行scrapy项目 分析如何获取数据 编写代码 step 1:设置item step 2:编写spider step 3: ...

  2. Dubbo 的 Helloworld

    前提条件 安装好了 ZooKeeper 作为注册中心 服务端 <?xml version="1.0" encoding="UTF-8"?> < ...

  3. 处理大并发量订单处理的 KafKa部署总结

    处理大并发量订单处理的 KafKa部署总结 今天要介绍的是消息中间件KafKa,应该说是一个很牛的中间件吧,背靠Apache 与很多有名的中间件搭配起来用效果更好哦 ,为什么不用RabbitMQ,因为 ...

  4. 【bzoj1455】罗马游戏 可并堆+并查集

    题目描述 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人,每个人都是一个独立的团.最近举行了一次平面几何测试,每个人都得到了一个分数. 皇帝很喜欢平面几何,他对那些得分很低的人嗤之以鼻.他决定玩这样 ...

  5. BZOJ4513 SDOI2016储能表（数位dp）

    如果n.m.k都是2的幂次方,答案非常好统计.于是容易想到数位dp,考虑每一位是否卡限制即可,即设f[i][0/1][0/1][0/1]为第i位是/否卡n.m.k的限制时,之前的位的总贡献:g[i][ ...

  6. HDU 6153 A Secret（扩展KMP模板题）

    A Secret Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 256000/256000 K (Java/Others) Total ...

  7. codevs 1078 最小生成树 kruskal

    题目描述 Description 农民约翰被选为他们镇的镇长!他其中一个竞选承诺就是在镇上建立起互联网,并连接到所有的农场.当然,他需要你的帮助. 约翰已经给他的农场安排了一条高速的网络线路,他想把这 ...

  8. 怎么让Intellj Idea 把数据库的表映射成hibernate的domain对象

    步骤如下: 第一步:连接数据源: 点击:idea右边的database.如下图所示: 或者你依次点击:view-->Tool windows--->database 然后你将看在如下点击下 ...

  9. HUSTOJ增加其他语言出现RuntimeError解决办法

    HUSTOJ增加其他语言,如Python.Java.Pascal等等,如果程序是正确的,却报运行错误,添加okcall就行. 具体错误可以看日志: [ERROR] A Not allowed syst ...

  10. 大数问题，通常用JAVA

    e.g. HDU1002 简单加法 import java.math.BigInteger; import java.util.Scanner; public class Main { public ...