首页 » CSS » CSS深入理解之line-height

CSS深入理解之line-height

原文 http://blog.csdn.net/muzi187/article/details/79171735

2018-01-27 02:00:13阅读(552)

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之line-height

line-height 一、line-height的定义

行高line-height,两行文字基线之间的距离。

1、什么是基线?字符(x)下边缘

2、为什么是基线?基线是*线定义之根本。

3、需要两行么?不需要,两行的定义决定了一行的表现

CSS深入理解之line-height

行高line-height可以让单行文本垂直居中?

其实并不是真的垂直居中,只是看起来居中。

二、line-height与行内框盒子模型

所有内联元素的样式表现都与行内框盒子模型有关!例如浮动的文字环绕效果......

 

<p>这是一行普通的文字,这里有个 <em>em</em> 标签</p>

上面是一行普通的文字,有个em标签。但是却包含了4中盒子。

1、“内容区域”(content area),是一种围绕文字看不见的盒子。“内容区域”(content area)的大小与font-size大小相关。

2、“内联盒子”(inline boxes),“内联盒子”不会让内容成块显示,而是排成一行。如果外部含inline水平的标签(span,a,em等),则属于“内联盒子”。如果是光秃秃的文字,则属于“匿名内联盒子”;

3、“行框盒子”(line boxes),每一行就是一个“行框盒子”,每个“行框盒子”又是由一个一个“内联盒子”(inline boxes)组成;

4、<p>标签所在的“包含盒子”(containing box),此盒子由一行一行的“行框盒子”(line boxes)组成。

 

了解行内框盒子模型,对理解line-height有什么现实意义?

三、line-height的高度机理

<p>这是一行普通的文字,这里有个<em>em</em>标签</p>

这是一行普通的文字,这里有个em标签。

console.log(document.querySelector("p").clientHeight);//p标签的高度

 

元素高度从何而来?是里面的文字撑开的?不是的。

元素p的高度是由line-height行高决定的

CSS深入理解之line-height

内联元素的高度是由line-height决定的!

Line-height明明是两基线距离,单行文字哪来行高,还控制了高度?

(1)行高由于其继承性,影响无处不在,即使单行文本也不例外;

(2)行高只是幕后黑手,高度的表现不是行高,而是内容区域和行间距。只不过正好:内容区域高度(content area)+ 行间距(vertical spacing)= 行高(line-height)

 

内容区域:

(1)内容区域(content area)高度只与字号(font-size)以及字体(font-family)有关,与line-height没有任何关系。

(2)在simsun宋体字体下,内容区域高度等于文字大小值。也就是说,在simsun字体下:font-size + 行间距 = line-height

(3)行间距上下拆分就有了“半行间距”。

行高决定内联盒子高度;行间距墙头草,可大可小(甚至负值),保证高度正好等同于行高。

 

如果行框盒子里面有多个不同行高的内联盒子,高度如何表现?

(1)举例:

<p>这是一行普通的文字,这里有个<em style=”line-height:80px”>em</em>标签</p>

这是一行普通的文字,这里有个em标签。

console.log(document.querySelector("p").clientHeight);//p标签的高度

<p>的高度是80px

<p>这是一行普通的文字,这里有个<em style="line-height:80px;vertical-align:40px;">em</em>标签</p>   <p>的高度为98px

(2)如果行框盒子里面有多个不同行高的内联盒子,高度并不一定等于高度最高的内联元素的高度。

 

含多个行框盒子的包含容器

多行文本的高度就是单行文本高度累加。

 

若行框盒子里面混入inline-block水平元素(如图片),高度如何表现?

四、line-height各类属性值

1、line-height支持的属性值

Normal、<number>、<length>、<percent>、inherit

(1)line-height:normal,默认属性值,跟着用户的浏览器走,且与元素字体关联。

在Chrome浏览器下,微软雅黑的normal值为1.32(字体占据的高度/字体大小)

在Chrome浏览器下,宋体的normal值为1.14

(2)line-height:<number>,使用数值作为行高值。例如:line-height:1.5,根据当前元素的font-size大小计算。假如文字大小(font-size)20px,则行高为1.5*20px=30px

(3)Line-height:<length>,使用具体长度值作为行高值。例如:line-height:1.5em,line-height:1.5rem,line-height:20px,line-height:20pt。

(4)Line-height:<percent>,使用百分比作为行高值。例如:line-height:150%,相对于设置了该line-height属性的元素的font-size大小计算。假设文字大小font-size为20px,则行高值为20px*150%=30px

(5)Line-height:inherit,行高继承(IE8+),例如:input{line-height:inherit;},input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强。

2、line-height:1.5,line-height:150%,line-height:1.5em,有什么区别?

(1)line-height:1.5,所有可继承元素根据font-size重计算行高;

(2)line-height:150%/1.5em,当前元素根据font-size计算行高,继承给下面的元素。

3、body全局数值行高使用经验:body{ font-size:14px; line-height:1.5; }

匹配20像素的使用经验,line-height=20px/14px=1.4285714...

body{ font-size:14px; line-height:1.4286; }

五、line-height与图片的表现

1、行高会不会影响图片实际占据的高度?

行高不会影响图片实际占据的高度!

2、消除图片底部间隙的方法

(1)图片块状化---无基线对齐,img{ display:block;}

(2)图片底线对齐,img{ vertical-align:bottom;}

(3)行高足够小 -- 基线位置上移,.box{ line-height:0;}

3、小图片和大文字,基本上高度受行高控制

六、Line-height的实际应用

1、实现:大小不固定的图片、多行文字垂直居中

(1)大小不固定的图片垂直居中(近似垂直居中)

<style>
.box {
	line-height:200px;
	text-align:center;
	background:#eee;
}
.box>img{vertical-align:middle;}
</style>
<div class="box">
	<img src="1.png">
</div>

(2)多行文字垂直居中(也是近似垂直居中)

<style>
.box {
	line-height:200px;
	text-align:center;
	background:#eee;
}
.box>.text{
	display:inline-block;
	line-height:normal;
	text-align:left;
	vertical-align:middle;
}
</style>
<div class="box">
	<div class="text">多行文字水平垂直居中实现的原理跟图片水平垂直居中是一样的,区别在于要把多行文本所在的容器的display水平转换成和图片一样,也就是inline-block,以及重置外部继承的text-align和line-height属性值。</div>
</div>



 


最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹