什么是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. 手动生成moc文件

    在VS中写Qt项目时,手动添加了一个类,由于要用到信号槽,所以需要生成相应的moc文件.写好信号槽以后,在类里面第一行应该写上Q_OBJECT关键字,编译项目会提示无法找到moc_XXX.cpp文件. ...

  2. NO.3: 尽量使用const

    1.尽量使用const修饰不会赋值操作的变量,防止 "无意义行为" 2.const成员函数遵守: bitwise constness 法则(只要函数内部不改变成员变量的,都是允许c ...

  3. centos7+mysql5.7.11实现主从复制

    1  首先检测当前的系统是否已经安装了MySQL yum list installed | grep mysql 如果有的话,删除 2  下载rpm库资源,在网页 https://dev.mysql. ...

  4. Apache 的 ab 压测工具快速使用

    ab 是一个 httpd 自带的很好用的压力测试工具,它是 apache bench 命令的缩写.ab 命令会创建多个并发访问线程,模拟多个访问者同时对某一 URL 地址进行访问.可以用来测试 apa ...

  5. Java基础-通过POI接口处理xls

    Java基础-通过POI接口处理xls 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  6. 鸟哥的Linux私房菜——第十一章

    视频链接: 土豆:http://www.tudou.com/programs/view/yT0PfIWU720 B站(推荐): http://www.bilibili.com/video/av9877 ...

  7. python删除列表元素remove,pop,del

    python删除列表元素 觉得有用的话,欢迎一起讨论相互学习~Follow Me remove 删除单个元素,删除首个符合条件的元素,按值删除,返回值为空 List_remove = [1, 2, 2 ...

  8. CString的头文件

    CString的头文件:#include <atlstr.h>

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

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

  10. JavaScript的单线程性质以及定时器的工作原理

    前些日子还在网上争论过js动画用setTimeout还是setInterval,个人偏向于setTimeout,当动画中牵扯到ajax时用setInterval会有时间偏差,出现一些问题即使用clea ...