什么是line-height（行高）？line-height设置1.5和150%有什么区别？这是一个比较常见的css面试题，带着这个问题往下看。所谓行高是指一段文字中某一行的高度吗？具体来说不是。w3school是这样定义的：

line-height 属性设置行间的距离（行高），该属性会影响行框的布局，在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

何为基线？基线不是汉字的底端，从英文字母来看，字母a、b、c的底端就是基线所在位置，文字默认垂直对齐方式就是基线与基线对齐（baseline），下面图中的蓝色线就是基线。

那么基线与基线之间的高度就称为行高line-height。注意：块级元素才有行高。

line-height有5个可能的值，分别是normal、number、length、%、inherit。一一介绍：

  1. normal，默认值，不同的浏览器值不同，大概是元素font-size的1.1-1.2倍的范围；
  2. number 一个数字，该数字被称为缩放因子，缩放因子与元素font-size相乘得到行高；
  3. length 具体的行高就是length；
  4. % 百分比，乘以元素的font-size得到行高；
  5. inherit 继承父级的行高；

如果文字不够直观，不如看看下面的demo：

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <title>line-height</title>

<style type="text/css">

p{font-size: 20px; width:200px;}

p.c1{line-height: normal} /*line-height: 24px chrome下。line-height为font-size的1.2倍*/

p.c2{line-height: 1.5;} /*line-height = 20*1.5 = 30px*/

p.c3{line-height: 30px;} /*line-height: 30px*/

p.c4{line-height: 150%;} /*line-height = 20*150% = 30px*/

</style>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>

</head>

<body>

<p class="c1">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>

<p class="c2">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>

<p class="c3">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>

<p class="c4">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>

<script type="text/javascript">

$("p").each(function(){

console.info( $(this).css("line-height") )

})

</script>

</body>

</html>

你会发现，当line-height设置成1.5和150%的效果是一样的。那么行高设置为一个缩放因子和一个百分比的区别在哪里？区别就在于继承上，当元素A的行高设置为缩放因子时，A元素的子元素B会继承这个缩放因子并将缩放因子乘以B的font-size得到B元素的行高；当元素A的行高设置为百分比时，元素A的子元素B的行高直接继承A元素计算后的行高。

例如有两个元素A、B，元素B是元素A的子元素：

父元素A设置行高为缩放因子时

元素A font-size:14px; line-height:1.5;   计算后行高为14*1.5 = 21px；

元素B font-size:28px;  line-height:1.5 (继承来的)； 计算后行高为28*1.5 = 42px；

父元素A设置行高为百分比时

元素A font-size:14px; line-height:150%;   计算后行高为14*150% = 21px；

元素B font-size:28px;  直接继承父元素A的行高计算值21px，此时B的行高比font-size还小，就会导致B元素内的文字上下重叠，代码如下

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <title>line-height</title>

<style type="text/css">

.c1{font-size: 14px; line-height: 1.5; width: 200px;}

.c2{font-size: 28px;}

.c3{font-size: 14px; line-height: 150%; width: 200px;}

.c4{font-size: 28px;}

</style>

</head>

<body>

<div class="c1">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

    <p class="c2">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>

</div>

<div class="c3">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

    <p class="c4">line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。</p>

</div>

</body>

</html>

因此，为了避免这种情况发生，建议将行高设置缩放因子，避免使用百分比或具体值。

本文地址http://www.cnblogs.com/wangmeijian/p/4222908.html by 王美建

css基础之line-height的更多相关文章

  1. CSS 基础总结

    CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...

  2. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  3. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  5. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  6. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  7. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  8. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  9. 开始编写寄几的 CSS 基础库

    前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量.很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司.这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流 ...

  10. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

随机推荐

  1. 通用权限管理系统底层更换最新Oracle驱动的方法

    通用权限管理系统底层先前访问Oracle数据库时需要客户端安装驱动软件,如下图: 安装完毕还需要一番配置,系统再引用其dll, 现在我们使用了最新的dll 该dll是Oracle出的最新的版本. 通用 ...

  2. JSON.parseObject(String str)与JSONObject.parseObject(String str)的区别

    一.首先来说说fastjson fastjson 是一个性能很好的 Java 语言实现的 JSON 解析器和生成器,来自阿里巴巴的工程师开发.其主要特点是: ① 快速:fastjson采用独创的算法, ...

  3. 阿里云ECS使用cloudfs4oss挂载OSS

    cloudfs4oss可以帮我们将OSS直接挂载到ECS上,就像一个目录一样方便访问.使用方法: 1.安装配置环境: yum install libcurl libcurl-devel openssl ...

  4. Your Prediction Gets As Good As Your Data

    Your Prediction Gets As Good As Your Data May 5, 2015 by Kazem In the past, we have seen software en ...

  5. [转载]必须Mark！最佳HTML5应用开发工具推荐

    http://www.csdn.net/article/2014-04-25/2819503-10-html5-tools-worth-checking-out/2 摘要:HTML5自诞生以来,作为新 ...

  6. iOS-Socket编程体验

    CHENYILONG Blog Socket编程体验 Socket编程体验  技术博客http://www.cnblogs.com/ChenYilong/新浪微博http://weibo.com/lu ...

  7. 第9月第26天 pairs和ipairs cocos2dx 动画

    1. a={ ip = "127.0.0.1", port = 6789 } for i,v in pairs(a) do print(i,v) end a={1} for i,v ...

  8. Spark笔记之累加器（Accumulator）

    一.累加器简介 在Spark中如果想在Task计算的时候统计某些事件的数量,使用filter/reduce也可以,但是使用累加器是一种更方便的方式,累加器一个比较经典的应用场景是用来在Spark St ...

  9. FPGA学习笔记. DDS

    DDS原理 直接数字式频率合成器(Direct Digital Synthesizer) 频率计算公式 Fout = FW * Fclk / 2^N Fout 输出频率, Fw 频率控制字, N 位数 ...

  10. hashlib和hmac

    hashlib hashlib模块用于加密相关的操作,代替了md5和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法. #!/usr/bin/env p ...