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. 电脑连接真机，但是androidstudio不显示手机，ADB Interface黄色感叹号

    1.打开设备管理器 右键计算机 -->管理-->选择设备管理器 2. 步骤如下: 1. 在设备管理器中,找到ADB Interface,右击,选择“更新驱动程序软件” 2. 在弹出的窗口中 ...

  2. robotframework+jenkins分布式执行自动化测试用例

    http://blog.sina.com.cn/s/blog_53f023270101sc3w.html http://www.cnblogs.com/2test/p/5336842.html

  3. ASP.NET MVC ActionFilterAttribute用法

  4. C#+MVC+EF+LayUI框架的应用(附带源码和教程)

    内容: 1.该框架主要用到的技术有MVC,EF,Layer,以及Razor语法和数据库有关的操作. 2.框架二次开发(增加,删除,修改,建库,以及维护查询等) 3.框架公用库更新要求与规范 4.本框架 ...

  5. base64编码问题

    最近遇到一个很奇怪的问题:post方式上传文件,因为文件不大,所以直接base64后作为参数扔给服务器.一开始好用,后来出问题了,上传的压缩包再下载后,能双击打开看到压缩包里面的文件,但是解压就报错, ...

  6. ML.NET 0.9 版本发布---.net下的机器学习引擎

    欢迎来到 2019年!在过去的9个月里, 我们一直在为ML.NET添加新的特征和改进相关功能.在提交1.0版本之前,我们将专注于包的整体稳定性并对API进行不断优化, 扩大测试的覆盖面并对开发文档进行 ...

  7. MySQL数据库（二）

    1.模糊查询like 在where 后面使用like 通配符: % 任意字符 _ 单个字符 2.order by 排序 order by price //默认升序排序 order by price d ...

  8. codeforces|CF1054D Changing Array

    因为数据范围是2e5级别的,所以我们考虑用异或前缀和来处理区间的异或情况.(比如说a包括b,那么我们通过异或可以知道b对于a的补区间的信息) 之后因为对任意\(a_i\)进行取反操作,会改变它和它之后 ...

  9. 【04】循序渐进学 docker：Dockerfile

    写在前面的话 从前面我们简单的了解了镜像,也运行了容器,各种官方的镜像显然无法满足我们自己的需求,我们目的终究是运行自己的业务. 所以,本章节的 Dockerfile 就主要讲怎么在官方镜像的基础上制 ...

  10. day04.4-装饰器

    1. 装饰器 装饰器本身就是函数,功能是为其他函数添加附加功能 装饰器的设计原则: (a). 不修改被修饰函数的源代码: (b). 不修改被修改函数的调用方法. 装饰器=高阶函数+函数嵌套+闭包 装饰 ...