什么是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. opencv ---getRotationMatrix2D函数

    getRotationMatrix2D函数 主要用于获得图像绕着 某一点的旋转矩阵  Mat getRotationMatrix2D(Point2f center, double angle, dou ...

  2. 使用JWPL (Java Wikipedia Library)操作维基百科数据

    使用JWPL (Java Wikipedia Library)操作维基百科数据 1. JWPL介绍 JWPL(Java Wikipedia Library)是一个开源的访问wikipeida数据的Ja ...

  3. CSS media--（来自网易）

    概述 通过媒体查询为不同的设备和大小配置不同的样式.代码展示 /* media */ /* 横屏 */ @media screen and (orientation:landscape){ } /* ...

  4. shift 用法

    shift  shift命令用于对参数的移动 (左移),通常用于在不知道传入参数个数的情况下依次遍历每个参数然后进行相应处理(常见于Linux中各种程序的启动脚本). 示例 1  示例 依次读取输入的 ...

  5. PHP5.6 和PHP7.0区别

    1. PHP7.0 比PHP5.6性能提升了两倍. 2.PHP7.0全面一致支持64位. 3.PHP7.0之前出现的致命错误,都改成了抛出异常. 4.增加了空结合操作符(??).效果相当于三元运算符. ...

  6. USB、UART、SPI等总线速率

    1. USB总线 USB1.1: ---低速模式(low speed):1.5Mbps ---全速模式(full speed): 12Mbps USB2.0:向下兼容.增加了高速模式,最大速率480M ...

  7. 数据库索引和SQL语句使用经验

    1.如果检索数据量超过30%的表中记录数,使用索引将没有显著的效率提高 2.在特定情况下,使用索引也许会比全表扫描慢,但这是同一个数量级上的差距:而通常情况下,使用索引比全表扫描要快几倍乃至几千倍! ...

  8. Go语言之Windows 10开发工具LiteIDE初步使用

    Intel Core i5-8250U,Windows 10家庭中文版,go version go1.11 windows/amd64,LiteIDE X34.1 在RUNOOB.COM的Go语言教程 ...

  9. java虚拟机规范(se8)——java虚拟机结构(五)

    2.10 异常 java虚拟机中的异常用Throwable类或者它的子类的实例来表示.抛出一个异常会导致立即非本地(an inmediate nolocal)的控制转移,从发生异常的地方跳到处理异常的 ...

  10. jQuery-介绍

    一:什么是jQuery jQuery 是一个 JavaScript 库. 二:安装 http://jquery.com/download/ http://jquery.cuishifeng.cn/ j ...