一、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. Oracle中SQL语言介绍以及基本用法

    一.SQL语言支持如下类别命令 1.数据定义语言(DDL):CREATE(创建).ALTER(更改) 和 DROP(删除)命令 1.1  CREATE (创建表,表空间,用户, 索引, 视图, 同义词 ...

  2. warning LNK4070的解决办法

           原文链接地址:http://blog.csdn.net/clever101/article/details/5898073#comments         重命名了一个MFC常规DLL ...

  3. bzoj2724: [Violet 6]蒲公英 分块 区间众数 论algorithm与vector的正确打开方式

    这个,要处理各个数的话得先离散,我用的桶. 我们先把每个块里的和每个块区间的众数找出来,那么在查询的时候,可能成为[l,r]区间的众数的数只有中间区间的众数和两边的数. 证明:若不是这里的数连区间的众 ...

  4. 如何获取iframe DOM的值

    在Web开发时,很多时候会遇到一个问题.我在一个页面嵌入了iframe,并且我想获得这个iframe页面某个元素的值.那么该如何实现这个需求呢? 先来看下演示: 效果演示 iframe1中文本框的值: ...

  5. HDU4289:Control（最小割）

    Control Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  6. POJ1733：Parity Game(离散化+带权并查集)

    Parity Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12853   Accepted: 4957 题目链接 ...

  7. java的URI和URL到底是什么

    在我们做开发时,经常有URI和URL弄混的问题,如果当时直接看URI和URL的源码就不可能弄混.首先我总结一下URI和URL的关系:他们的关系是:URL是一种特殊的URI,是URI包括URL, 下面用 ...

  8. 怎么把linux的磁盘映射到windows上

    步骤如下: 右击如下的computer: 然后选择:Map network drive... 然后在下图按图中所示操作: 最后成功如下图所示:

  9. 7月23号day15总结

    数据清洗完成之后开始编写前端,通过spring框架将清洗后数据库中的数据显示在页面中. 框架的搭建和js的使用都在学习阶段,

  10. 移动端list布局，左边固定，右边自适应

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...