关于line-height
line-height的计算：以px为例，line-height减font-size再除以二，即为font的上下间距
normal的情况为默认值，浏览器会计算出“合适”的行高，与设置的字体有关。多数浏览器（Georgia字体下）取值为1.14，即为font-size的1.14倍，如果未设定font-size，那既是基准值16px的1.14倍
单独讨论这个取值是没什么意义的，因为normal和具体的数值相比，会因为字体的不同而不同
如果是项目需要，还是给定一个值好一些
下例代码中，如果不设置line-height:1的话，则normal/默认的行高显示为22*1.14px=25px;
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
p{
margin:0;font-size:22px;
}
p.small{
line-height: 0.5
}
p.big{
line-height: 2
}
/*p.normal{
line-height: 1
}*/
</style>
</head>
<body>
<p class="normal">
这是拥有标准行高的段落。
默认行高大约是 1。
这是拥有标准行高的段落。
</p> <p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p> <p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>
那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>
实例：body{font:100%/normal arial;} , body{font:100%/120% arial;} ,body{font:100%/1.2 arial;} ,body{font:100%/25px arial;}
----------------------------------------------------------------------------
如果设为normal或者不设的话，即为默认的方式：根据自身的font-size*1.12
关于继承，可以发现，12*120%=14.4px，这个计算出来的值会被层叠下去的元素所继承，
行内元素如span没有行高（line-height）
<html>
<head>
<style type="text/css">
body{font-size:12px;line-height:120%;font-family: Georgia;margin:0;}
span{font-size: 16px;}
h1{font-size: 32px;margin:0;}
#footer{font-size: 16px;margin:0;}
</style>
</head>
<body>
<h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- body的字体大小12*120%=14x -->
<span>bbbbbbbbbbbbbbbbbb</span><!-- 16*1.2=19px -->
<p id="footer">cccccccccccccccccccc</p><!-- body的字体大小12*120%=14x -->
</body>
</html>
而设置120%和1.2效果是不一样的！！
<html>
<head>
<style type="text/css">
body{font-size:12px;line-height:1.2;font-family: Georgia;margin:0;}
span{font-size: 16px;}
h1{font-size: 32px;margin:0;}
#footer{font-size: 16px;margin:0;}
</style>
</head>
<body>
<h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- 32*1.2=38px -->
<span>bbbbbbbbbbbbbbbbbb</span><!-- 16*1.2=19px -->
<p id="footer">cccccccccccccccccccc</p><!-- 16*1.2=19px -->
</body>
</html>
而在body中设置了line-height为px值的话，
<html>
<head>
<style type="text/css">
body{font-size:12px;line-height:22px;font-family: Georgia;margin:0;}
span{font-size: 16px;}
h1{font-size: 32px;margin:0;}
#footer{font-size: 16px;margin:0;}
</style>
</head>
<body>
<h1>aaaaaaaaaaaaaaaaaaaaa</h1><!-- 22px -->
<span>bbbbbbbbbbbbbbbbbb</span><!-- 16*normal比例(跟字体有关)=19px -->
<p id="footer">cccccccccccccccccccc</p><!-- 22px -->
</body>
</html>
一般来说，设置行高为值：纯数字是最理想的方式。因为其会随着对应的font-size而放缩
在多种情况下，很难确定一个完美的line-height，但无论如何，保守估计标题是没有段落那么的需要自适应line-height
举例来说，所有内容被定义为1.5，标题被定义为1.2.
body {line-height:1.5} h1,h2,h3,h4,h5,h6 {line-height:1.2}
万维网内容可存取性指南（WCAG）2.0规定“段落中的行距至少要1.5倍”，这意味着如果要达到AAA等级，行高应为1.5.
关于line-height的更多相关文章
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- 真正的能理解CSS中的line-height，height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset
一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...
- CSS学习笔记——视觉格式化模型 visual formatting model
CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...
- 微信小程序demo2
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 ...
- 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...
- 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了
接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...
- 浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
随机推荐
- Maven基础配置—本地Maven配置
1.下载客户端 通过http://maven.apache.org/download.cgi#下载Maven本地客户端. 我下载的是apache-maven-3.2.5-bin.zip,在D盘解压. ...
- SQLSERVER2008 R2安装说明
SQLSERVER2008 R2安装说明一. 安装环境:SQLSERVER2008 R2有32位版本和64位版本,32位版本可以安装在WINDOWS XP及以上操32位和64位的操作系统上,如果服务器 ...
- Linux 平台MySQL启动关闭方式总结
MySQL的启动方法有很多种,下面对比.总结这几种方法的一些差异和特性,下面实验的版本为MySQL 5.6.如有疏漏或不足,敬请指点一二. 1:使用mysqld启动.关闭MySQL服务 mysql ...
- MS SQL 错误：The operation could not be performed because OLE DB provider "SQLNCLI10" for linked server "test" was unable to begin a distributed transaction.
一同事在测试服务器(系统:Windows 2008 R2 Standard 数据库:SQL SERVER 2008 R2)通过链接服务器test使用分布式事务测试时出错,出错信息如下: set ...
- ORACLE调整SGA_TARGET值耗费时间长案例
在一数据库版本为(标准版)Oracle Database 10g Release 10.2.0.4.0 - 64bit Production 的服务器上调整 sga_target时,遇到命令执行了非常 ...
- 关于 Java 中 finally 语句块的深度辨析
应该有很多人对java的finally 理解的不是很透彻吧,这里有篇文章讲的非常深入.猛击下面链接.面试时经常问到这问题 http://www.ibm.com/developerworks/cn/ja ...
- 【Windows编程】系列第十一篇：多文档界面框架
前面我们所举的例子中都是单文档界面框架,也就是说这个窗口里面的客户区就是一个文档界面,可以编写程序在里面输入或者绘制文本和图形输出,但是不能有出现多个文档的情况.比如下面的UltraEdit就是一个典 ...
- EF继承关系映射
继承映射策略的三种策略 There are following three different approaches to represent an inheritance hierarchy in ...
- 区块链是伟大的，比特币则不然。《FinTech，金融科技时代的来临》。3星。
本书讲技术给金融业带来的变革和可能的趋势.作者认为区块链是伟大的发明,因为他可以让金融交易免费且实时地进行.比特币则可能会被其他区块链技术取代.书中有至少一半的内容涉及到了区块链和比特币.总体评价3星 ...
- 探索UDP套接字编程
UDP和TCP处于同一层网络模型中,也就是运输层,基于二者之上的应用有很多,常见的基于TCP的有HTTP.Telnet等,基于UDP有DNS.NFS.SNMP等.UDP是无连接,不可靠的数据协议服务, ...