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. 在Linux上编译Hadoop-2.4.0

    目录 目录 1 1. 前言 1 2. 安装依赖 1 2.1. 安装ProtocolBuffer 2 2.2. 安装CMake 2 2.3. 安装JDK 2 2.4. 安装Maven 3 3. 编译Ha ...

  2. windows mobile 只能运行一个程序实例

    static class Program { [System.Runtime.InteropServices.DllImport("coredll.Dll", SetLastErr ...

  3. MongoDb安全配置：简单的身份认证

    mongod默认启动不加任何参数时,是没有身份认证的,任何人都可以登录上进行任何操作 启动时添加--auth可以使用身份验证模式 使用mongod -f mongod.conf配置文件启动时,配置文件 ...

  4. java学习（二）运算符

    一.运算符 赋值运算符:=  +=  -=  *=  /=  %= 算术运算符:+ - *  /  %   ++   -- int x = 3;  int y = 4   int c = x*1.0 ...

  5. php 与java安卓客户端的查询交互

    PHP 服务器端: function getids() { $this->output->set_header('Content-Type: application/json; chars ...

  6. jquery-tmpl 插件

    做项目时页面上有处功能是:在页面有处列表.有添加,我添加修改或删除后要刷新这个列表,首先想到的是局部刷新,但我们一般说的局部刷新就是利于ajax去后台调用数据并显示,而这里是一整个列表就比较麻烦了,刷 ...

  7. tomcat异常 Socket bind failed: [730048]

    tomcat从官网站点下载时须注意版本信息: zip格式为window压缩版. tar.gz为linux安装板. installer为window安装板. 解压后的各文件功能与作用: bin:用于放置 ...

  8. [agc004d]Teleporter 暴力

    Description 维尼管辖的领土很大,我们可以抽象为n个城市,其中1号点为首都.这n个城市之有n条单向电缆,一条信息经过一条电缆进行传输所需时间会+1s,然而维尼并不能忍受时间白白被续,他要求从 ...

  9. Docker容器基础认知

    ## 一. [docker](http://www.itxdm.me/archives/tag/docker/)概念 [Docker](http://www.itxdm.me/wp-content/p ...

  10. jquery加载方式，选择器，样式操作

    原生js和css不兼容,jquery已经过测试,可放心使用 https://code.jquery.com   这个网站可以下载jquery的源码,比如把源码下载到js文件夹中,文件名为jquery- ...