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. mybatis SqlMapConfig.xml

    一.SqlMapConfig.xml 1.属性properties 在入门时,以抽取出连接数据库的属性得到properties文件. a．可以通过resource和url来获得属性. b.proper ...

  2. MVC4 Filter (筛选器)

    Filter,在MVC中我们通常将Filter定义成Attribute特性 来供Controller 或者Action 方法调用. FilterAttribute 是所有Filter 的基类. 而 F ...

  3. [转]java设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  4. layui中折叠面板的使用

    运用折叠面板后 可以让页面更加整洁 有什么不懂的可以留言 代码放到底部 需要引入的文件 JQuery代码: html代码 <div class="layui-colla-item&qu ...

  5. layui后台框架的搭建

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从 ...

  6. 纸壳CMS 2.3，正式加入商城功能

    纸壳CMS发布了2.3版本,主要是添加了商城功能,强化产品功能.让您的网站轻松实现电子商务. 有关2.3版本的更多信息,请查看以下链接: https://github.com/SeriaWei/ZKE ...

  7. JavaScript类型检测汇总

        曾经我以为JavaScript中的类型检测只要使用 typeof 或 instanceof 就可以通通解决.后来我发现我是too young too naive啊!早说过JavaScript是 ...

  8. 动态添加select的option [转载]

    动态给select标签添加option,结合前人经验以及自己经验,现在总结三种方法供大家参考,一起交流学习!首先是定义的select元素://根据ID获得select元素 var mySelect = ...

  9. 「SHOI2016」黑暗前的幻想乡

    题目链接 戳我 \(Describe\) \(n−1\)个公司,每个公司能修一些边,求每条边都让不同的公司来修的生成树的方案数 \(Solution\) 这道题很明显容斥.答案就是:所有都选的生成树个 ...

  10. OI题目类型总结整理

    ## 本蒟蒻的小整理qwq--持续更新(咕咕咕) 数据结构 数据结构 知识点梳理 数据结构--线段树 推荐yyb dalao的总结--戳我 以后维护线段树还是把l,r写到struct里面吧,也别写le ...