line-height详解

　　要说line-height就必须要知道这几个概念了： 顶线、中线、基线、底线。 这也就是在vertical-align中可能用到的top,middle,baseline和bottom属性了。那么究竟是什么呢？

　　撒玛利亚人 写的非常好，大家可以学习。

　　

　　这里，由上到下即为 顶线， 中线，基线和底线，其中基线是第三个。

　　而什么是所谓的行高line-height呢？

　　定义是行高为两行中基线的距离，其实我们也可以理解为任意两个相对的线的距离。   而第一行中的基线和下面一行中的顶线就是行距。那么显然半行距就是中间灰色区域的一半了。

　　font-size 即为字体的高度，即字体所占的真正的高度，即深灰色的部分。

　　什么使内容区呢？

　　内容区就是图中深灰色的部分，即底线和顶线所包裹的区域。

　　

　　什么是行内框呢？

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

　　

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

　　

　　好了，那什么是line-height呢？

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

　　值得注意的是：一个行内元素如span不是被其中的文字撑开的，而是由其中的line-height撑开的，看下面的这个例子：

<!DOCTYPE html>

<html>

<head>

    <title>for test</title>

    <style>

        .test1{font-size:20px; line-height:; border:1px solid #cccccc; background:blue;}

        .test2{font-size:; line-height:20px; border:1px solid #cccccc; background:red;}

    </style>

</head>

<body>

        <div class="test1">test1内容，背景为蓝</div>

        <div class="test2">test2内容，背景为红</div>

</body>

</html>

　　效果如下所示：

　　可以看到，test1虽然设置了字体大小，但是却没有吧Line-height的span撑起来。

　　而虽然test的font-size为0，但是因为设定了行高，所以被撑起来了。

　　line-height可能的值如下所示；

　　

　　即默认为normal我们一般都不设定。

　　而line-height也可以设置为数字，他表示是与字体尺寸相乘来设置行间距。length即设置固定的行间距。

　　

　　应用；

　　１.对于ｐ等，设置height和line-height相等，这样文字就居中了 。

　　2.对于div中的img，可以给div设置height和line-height相等，然后给img设置vertical-align:middle;即可实现。

　　张鑫旭文章。

　　

　　

line-height详解的更多相关文章

  1. JavaScript中的*top、*left、*width、*Height详解

    来源:http://www.ido321.com/911.html html代码 1: <body> 2: <div class="father" id=&quo ...

  2. opencv学习笔记——cv::line函数详解

    void cvLine( CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8, ...

  3. kernel command line 参数详解

    Linux内核在启动的时候,能接收某些命令行选项或启动时参数.当内核不能识别某些硬件进而不能设置硬件参数或者为了避免内核更改某些参数的值,可以通过这种方式手动将这些参数传递给内核.  如果不使用启动管 ...

  4. CSS中详解height属性

    目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...

  5. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  6. 安装Phoenix时./sqlline.py执行报错File "./sqlline.py", line 27, in <module> import argparse ImportError: No module named argparse解决办法（图文详解）

    不多说,直接上干货! 前期博客 Apache版Phoenix的安装(图文详解) 问题现象 Traceback (most recent call last): File , in <module ...

  7. 安装cloudermanager时出现org.spingframework.web.bind.***** host[] is not present at AnnotationMethodHandlerAdapter.java line 738 ****错误（图文详解）（博主推荐）

    不多说,直接上干货! 首先,这个问题,写给需要帮助的朋友们,本人在此,搜索资料近半天,才得以解决.看过国内和国外,资料甚少.特此,写此博客,为了弥补此错误解决的资料少的缘故! 问题详解  解决办法   ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. HTML标签----图文详解

    国庆节快乐,还在加班的童鞋,良辰必有重谢! 本文主要内容 头标签 排版标签:<p>     <br>     <hr>     <center>     ...

  10. 详解shape标签

    转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...

随机推荐

  1. 【Android开发精要笔记】Android组件模型解析

    Android组件模型解析 Android中的Mashup 将应用切分成不同类别的组件,通过统一的定位模型和接口标准将他们整合在一起,来共同完成某项任务.在Android的Mashup模式下,每个组件 ...

  2. cxgrid取消过滤下拉框

    选择tableview1.optionscustomize.columnfiltering=fasle;

  3. MVC4 路由解析 同名Controller的解决方案

    通常我们在MVC中通过Area建立子站的时候会有 controller名称重复的情况,这是后如何区分路由优先级, 我们知道 在Route对象中存在RouteValueDictionary 类型的Dat ...

  4. C#中使用Redis学习二 在.NET4.5中使用redis hash操作

    上一篇>> 摘要 上一篇讲述了安装redis客户端和服务器端,也大体地介绍了一下redis.本篇着重讲解.NET4.0 和 .NET4.5中如何使用redis和C# redis操作哈希表. ...

  5. [转载].NET Web开发技术(补充)

    大家在工作应该养成善于总结的习惯,总结你所学习.使用的技术,总结你所工作事项的比较好的地方,善于总结不断的沉淀优化自己.适时停下来总结下过去走过的路,才能让我们的未来走的更坚定.文章转自JamesLi ...

  6. sharepoint 2010 GetUserProfileByName 5566

    After some further investigation i found that it's actually the "ASP.NET Impersonation" th ...

  7. 序列（DP）（组合数）

    这是一个DP题. 我们设\(f[i][j][k]\)表示\(i\)序列长度中放入了\(j\)个元素,其中\(k\)是限定的众数的个数:状态转移方程是 \[f[k][i][j]=f[k][i-1][j- ...

  8. 201621123012《Java程序设计》第12次学习总结

    作业12-流与文件 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 面向系统综合设计-图书馆管理系统或购物车 使用流与文件改造你的图书馆管理系统或购物车 ...

  9. python3 的zip（）函数

    重点 https://blog.csdn.net/qq826364410/article/details/78259796 为啥会出现几个两个空列表????

  10. mysql扩展库应用---在线词典程序范例

    1,在mysql中创建数据表words. create table words( id int primary key not null auto_increment, enword varchar( ...