css中line-height行高的深入学习
之前对css中行高line-height的理解还是有些肤浅，深入后才发觉里面包罗万象。学习行高line-height,首先从基本原理开始
（标注该文章转载 http://www.cnblogs.com/dolphinX/p/3236686.html 该文章略有补充四种盒子）
顶线/中线/基本/底线
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
行高概述 指一行文字的高度。具体来说是指两行文字间基线之间的距离。
如上图所示 从上往下依次是顶线/中线/基线/底线这很像初学英语时的四线三格本子，其中vertical-align中属性有top、middle、baseline、bottom与四条线相关。
尤其记得基线不是最下面的线，最下面的是底线。
行高/行距/半行间距
行高是指上下文本行的基线间的垂直距离，即上图中两条红线间垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。
半行间距 即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2
四种盒子 内容区域/行内框/行框/包含盒子
(备注: 决定行高高度的幕后者是内容区域与行间距其中
1、内容区域(content area)高度只与字号(font-size)以及字体(font-size)有关
2、只有在simsun字体(也即宋体)下，font-size+行间距=line-height)
内容区域(content area) 底线和顶线包裹的区域，即下图深灰色背景区域。
行内框(inline box) 每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域，
而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边（深蓝色区域）
行框 行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。行框高度等于本行内所有元素中行内框最大的值
（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。
包含盒子 containing box containing包含上述三种盒子 （综合4种盒子如下图所示）
<div style="background-color:#ccc;">
<span style="font-size:1em;background-color:#666;">中文English</span>
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
<span style="font-size:1em;background-color:#666;">English中文</span>
</div>
行高单位
定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
|
值
|
说明
|
|
normal
|
默认,设置合理的行间距。
|
|
number
|
设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
|
|
length
|
设置固定的行间距。
|
|
%
|
基于当前字体尺寸的百分比行间距。
|
|
inherit
|
规定应该从父元素继承 line-height 属性的值
|
行高属性暂时先简单概述 更详细部分 http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
单行文本垂直居中
<div style="line-height:100px;border:dashed 1px #0e0;">
This is a test.
</div>
多行文本垂直居中
<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
<span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">
多行文本垂直居中.<br/>
多行文本垂直居中.
</span>
</div>
行内框对行高的影响
行框高度是行内最高的行内框高度，通过line-height调整，内容区行高与字体尺寸有关，padding不对行高造成影响。
<div style="border:dashed 1px #0e0;margin-bottom:30px;">
<span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;">
<span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
</div>
行高的继承之百分比
行高是可继承的，但并不是简单的copy父元素行高，继承的是计算得来的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>行高的继承之百分比</title>
<style>
body {
font-size: 16px;
line-height: 120%;
/*计算值为19.2px*/
}
h1, p {
margin: 0;
}
h1 {
font-size: 32px; /*行高line-height小于字体的大小导致字体重叠*/
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>行高的继承之百分比</h1>
<p>1.line-height是120% body字体是16px计算出的行高是19.2px会被层叠下的元素继承下去</p>
<p>2.line-height不会随着font-size做相应的缩放</p>
</body>
</html>
【资料参考】
来源 http://www.cnblogs.com/dolphinX/p/3236686.html
http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
http://www.zhangxinxu.com/wordpress/2009/11/css行高line-height的一些深入理解及应用/
http://www.imooc.com/learn/403
css中line-height行高的深入学习的更多相关文章
- 深入了解CSS字体度量，行高和vertical-align
line-height和vertical-align在CSS中是两个简单的属性.如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们.但事实上并不如此.他们其实很复杂,也是CSS中 ...
- CSS行高line-height的学习
一.定义和用法 line-height 属性设置行间的距离(行高). 可能的值 normal默认.设置合理的行间距. number设置数字,此数字会与当前的字体尺寸相乘来设置行间距. length设置 ...
- wpf datagrid row height 行高自动计算使每行行高自适应文本
wpf 的datagrid的行高 要么是Auto,要么是定值:但会带来麻烦就是每行行高都一样. 当需要按内容(主要是wrap 换行的textbox或textblock)来动态调整行高的时候,需要用到d ...
- CSS中的height与line-height的区别
<p class='text'>高与行高的区别</p> 那么我要想让这些字上下居中那么可以用宽度和行高控制 .text{ height:25px; line-height:25 ...
- css总结6：行高和字体大小
1 CSS line-height 属性 代码: p.small {line-height:70%}p.big {line-height:200%} 运行后:70%与200%宽高 2 CSS font ...
- css中的宽和高
width width表示宽 height height表示高 max-width.min-width max-width表示最大宽度 min-width表示最小宽度 max-height.min-h ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
- delphi中设置listview行高的方法
第一步.在form中放置一个ImageList: 第二步.将ListView的SmallImages设置为第一步中放置的ImageList: 第三部.将imageList的height设置成自己需要的 ...
- 解决asp.net中HTML中talbe的行高被内容撑的变高的问题
将asp.net页面中的如下语句: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
随机推荐
- SDWebImage源码解读 之 SDWebImageCompat
第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的 ...
- BPM Domino集成解决方案
一.需求分析 Lotus Notes/Domino是IBM的协同办公平台,在国内有广泛的用户. 但由于推出年头较早.采用文档数据库等特点, 导致其流程集成能力弱.统计分析难.不支持移动办公等问题,很多 ...
- 浅析SQL查询语句未显式指定排序方式，无法保证同样的查询每次排序结果都一致的原因
本文出处:http://www.cnblogs.com/wy123/p/6189100.html 标题有点拗口,来源于一个开发人员遇到的实际问题 先抛出问题:一个查询没有明确指定排序方式,那么,第二次 ...
- 用C++实现Linux中shell的ls功能
实现输出当前目录下的文件名 ls功能: 方法一: #include <iostream> #include <algorithm> #include <stdio.h&g ...
- slf4j
Simple Logging Facade for Java (SLF4J) slf4j可以看成是对各个日志框架的一种抽象,它提供了一套通用的日志使用接口. 下面是slf4j的几个版本比较: 1.6. ...
- VS2010 release编译下进行调试，“当前不会命中任何断点,还没有为文档加载”问题解决方案
在release模式下调试程序,经常出现"当前不会命中任何断点,还没有为文档加载"的问题,可尝试以下方法: 1. 属性 → 配置属性 → C/C++ → 常规 → 调试信息格式:选 ...
- 瞬间记住Javascript中apply与call的区别
关于Javascript函数的apply与call方法的用法,网上的文章很多,我就不多话了.apply和call的作用很相似,但使用方式有区别 apply与call的第一个参数都是一个对象,这个对象就 ...
- Linux配置防火墙 开启80端口的方法
命令行输入: vi /etc/sysconfig/iptables 将 -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT ...
- 浅谈浏览器http的缓存机制
针对浏览器的http缓存的分析也算是老生常谈了,每隔一段时间就会冒出一篇不错的文章,其原理也是各大公司面试时几乎必考的问题. 之所以还写一篇这样的文章,是因为近期都在搞新技术,想“回归”下基础,也希望 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...