一、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. Hadoop2.6.0 完全分布式搭建

    1 搭建这个完全分布式的前提环境: 配置好了jdk环境 配置好了ssh免密码登录(详见我的另外一篇博客,专门说ssh免密码登录) 我这里设置了四台机器,一台做master,另外三台做slave,hos ...

  2. lintcode-104-合并k个排序链表

    104-合并k个排序链表 合并k个排序链表,并且返回合并后的排序链表.尝试分析和描述其复杂度. 样例 给出3个排序链表[2->4->null,null,-1->null],返回 -1 ...

  3. iOS-plist文件的写读

    NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"xiaoli" ofType:@"plist ...

  4. Performanced C++ 经验规则

    http://www.cnblogs.com/ccdev/archive/2012/12/27/2836448.html Performanced C++,意为“高性能C++“编程,是笔者和所在团队多 ...

  5. java课堂第7次笔记

  6. java-2018-01-17计划

    1.一句英语 包括单词 2.一个java版本的设计模式 参考:https://github.com/iluwatar/java-design-patterns 学习了抽象工厂模式 总结:java的RS ...

  7. BZOJ2118 墨墨的等式 【最短路】

    题目链接 BZOJ2118 题解 orz竟然是最短路 我们去\(0\)后取出最小的\(a[i]\),记为\(p\),然后考虑模\(p\)下的\(B\) 一个数\(i\)能被凑出,那么\(i + p\) ...

  8. 安徽师大附中%你赛day7 T2 乘积 解题报告

    乘积 题目背景 \(\mathrm{Smart}\) 最近在潜心研究数学, 他发现了一类很有趣的数字, 叫做无平方因子数. 也就是这一类数字不能够被任意一个质数的平方整除, 比如\(6\).\(7\) ...

  9. 关于Maven项目install时出现No compiler is provided in this environment的处理

    关于Maven项目build时出现No compiler is provided in this environment的处理 新配置的Eclipse环境,运行现有项目没问题,一日,从svn上检出了一 ...

  10. Drac6-Web界面无法访问

    1. ssh idracip, and reset RAC -- will need around 10mins /admin1-> racadm racreset RAC reset oper ...