1.定义
   行高:两行文字baseline(基线)之间的距离

示意图:

2.为何line-height可以让单行文本垂直居中    
   其实并没有垂直居中,除非将font-size:0;

3.line-height的高度原理(可以先看看行内盒子的原理)
   * 行内元素的高度是line-height决定的,而不是由font-size决定的,
   * 行高由于其继承性,影响无处不在,即使单行文本也不例外
   * 行高只是幕后黑手,高度的表现不是行高,而是内容区域和行间距
   * 内容区域高度+行间距 = 行高
      内容区域高度至于字号以及字体有关,与line-height无关

4.比较有用的属性值
   * line-height:1.5;line-height:150%;line-height:1.5em;
      实际的line-height: font-size*1.5,适合页面自适应

* 区别:
      * 1.5: 所有可继承元素根据自身的font-size重计算行高
      * 150%/1.5em: 当前元素根据font-size计算行高,子元素继承该行高

分析:div的行高: line-height:24px*1.5,span的行高 line-height:60px*1.5
<div style="background:#eee;font-size:24px;line-height:1.5;">
<span style="font-size:60px;">测试1</span>
</div>
分析: div的行高: line-height:24px*1.5,span继承div的行高 line-height:24px*1.5
<div style="background:#eee;font-size:24px;line-height:150%;">
<span style="font-size:60px;">测试2</span>
</div>

* 继承性(IE8+)
   input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强

* 使用经验
   body{font-size:14px;line-height:1.4286}  => line-height:20px;

5.line-height和图片的表现
  * 行高不会影响图片实际占据的高度
  * 消除图片底部间隙的方法
    a.图片块状化 - 无基线对齐   img{display:block;}
    b.图片底线对齐  img{vertical-align:bottom;}
    c.行高足够小 - 基线位置上移 .box{line-height:0;}

6.line-height的实际应用
   * 大小不固定的图片垂直居中(IE8+)

.box{height:300px;line-height:300px;text-align:center;}
.box>img{vertical-align:middle;/*基线网上1/2高度*/}

* 多行文本垂直居中(IE8+)

.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;}
/* 重置外部继承的line-height、text-align */

* 代替height,避免IE6/IE7下的haslayout

<span class="out">
<span class="in1">height:36px;</span>
</span>
<span class="out">
<span class="in2">line-height:36px;</span>
</span> .out{display:inline-block;/*或float:left*/}
.in1{display:block;height:36px;}
.in2{display:block;line-height:36px;} /*结果:在IE6/IE7下,out容器的 inline-block,给变成了block*/

深入了解line-height的更多相关文章

  1. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  5. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  7. 微信小程序demo2

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现   ...

  8. 模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  9. 想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  10. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

随机推荐

  1. mongodb基础系列——数据库查询数据返回前台JSP(一)

    经过一段时间停顿,终于提笔来重新整理mongodb基础系列博客了. 同时也很抱歉,由于各种原因,没有及时整理出,今天做了一个demo,来演示,mongodb数据库查询的数据在JSP显示问题. 做了一个 ...

  2. PHP基本语法(二)

    [重点,哪些情况我们会将其它类型的值视为bool值的假:]1. 整型的0会视为bool值的假来执行,任何非0的整型都视为真2. 浮点的0.0不论后面有多少个0都视为假0.000000000,后面只要有 ...

  3. Why String is immutable in Java ?--reference

    String is an immutable class in Java. An immutable class is simply a class whose instances cannot be ...

  4. .Net设计模式_工厂模式(3)

    3.抽象工厂模式 引言: 我们知道汽车需要很多部件才能组装成一辆成品的车,那么我们需要汽车厂生产很多东西,如:马达.车轴.轮胎等,这些东西组装起来后成为了一辆车. 这些东西就是产品族,图解:(出之ht ...

  5. 《app研发录》第一章 重构,夜未眠笔记

    1.1 重新规划android的项目结构     重新规划android的目录结构分两步: 1.建立AndroidLib类库,将与业务无关的逻辑转移到AndroidLib. acitivity存放的是 ...

  6. Find Security Bugs研究,邀请志同道合者一起参与

    Find Security Bugs研究,邀请志同道合者一起参与http://automationqa.com/forum.php?mod=viewthread&tid=2803&fr ...

  7. hibernate缓存技术

    1.缓存 2.Hibernate 缓存作用:为了提高查询效率. 3.第一次操作某个对象的时候,把操作的对象数据存储到缓存中,然后下一次在对同一个对象操作的时候,就不会在连接数据库. 4.Hiberna ...

  8. 转:XMLP报表导出为excel时设置文本不自动转为数字

    转自:http://yedward.net/?id=337 对于这个问题,只要在RTF模版中设置下强制LTR即可,设置方法如下: 图1:勾选强制LTR 也可以自己输入下面的代码: <fo:bid ...

  9. mysql优化概析

    优化从几个方面来说: 表结构设计 适当索引(主键 普通 唯一 全文组合) mysql本身配置 硬件配置 SQL语句优化 存储过程 分表 分区 读写分离 清理垃圾数据

  10. 关于IPv6

    App在本地IPv6的测试环境下运行一切正常,结果又是被拒,悲剧原因还是IPv6的问题;求解决方法被拒原因We discovered one or more bugs in your app when ...