CSS样式:line-height、height与font-size的联系

CSS样式:line-height、height与font-size的联系1.基本概念类似于之前小学写字学习的四线三格,分为顶线(top)、中线(middle)、基线(baseline)、底线(bottom)。(1)行高是指文本行基线间的垂直距离。(2)行距是上一行的底线和下一行的顶线之间的距离。行距的一半就是半行距。上间距等于下间距。(3)字体大小是同一行的顶线和底线之间的距离。从图中可以看出:行高=行间距+字体大小=上半行距+字体大小+下半行距2….

1.基本概念

类似于之前小学写字学习的四线三格,分为顶线(top)、中线(middle)、基线(baseline)、底线(bottom)。
(1)行高是指文本行基线间的垂直距离。
(2)行距是上一行的底线和下一行的顶线之间的距离。
行距的一半就是半行距。上间距等于下间距。
(3)字体大小是同一行的顶线和底线之间的距离。
CSS样式:line-height、height与font-size的联系
从图中可以看出:
行高=行间距+字体大小=上半行距+字体大小+下半行距

2.font-size和line-height的关系

HTML结构:

 <div>美丽的中国<br />
    	中国很美丽
    </div>

(1)当font-size等于line-height时,即行间距为0;

div{
	text-align:center;
	background:pink;
	font-size:30px;
	line-height:30px;
	}   

效果如图:
CSS样式:line-height、height与font-size的联系
(2)当font-size大于line-height时,即行间距为负值,文字会杂糅在一起。

div{
	text-align:center;
	background:pink;
	font-size:50px;
	line-height:30px;
	}   

效果如图所示:字体变大,元素高度不变。
CSS样式:line-height、height与font-size的联系
(3)当font-size小于line-height时,行间距大于0,上下文字之间有间距。

div{
	text-align:center;
	background:pink;
	font-size:15px;
	line-height:30px;
	}   

效果如图所示:
CSS样式:line-height、height与font-size的联系

3 line-height和height的关系

CSS中起高度作用的应该就是height以及line-height。height是用来设置标签元素的高度。
以一个div为例,来进一步讨论两个问题:
第一个问题:如果不设置div的高度时,是div的font-size决定了div的高度还是line-weight的值。下面采用代码进行说明:

<div class="demo">测试</div>

(1)字体大小值部位0,行高为0;

.demo{
	text-align:center;
	border:1px solid blue; 
	background:pink;
	line-height:0px; 
	font-size:20px;			 
	}
效果:

CSS样式:line-height、height与font-size的联系
增加字体大小,只有字体大小变,元素撑不起高度,不显示。
(2)行高一定,字体大小为1;(给0就不能体现字的存在)

.demo{
	text-align:center;
	border:1px solid blue; 
	background:pink;
	line-height:40px; 
	font-size:1px;			 
	}

效果如图:
CSS样式:line-height、height与font-size的联系
增大字体大小,元素不改变。增加行高数值大小,元素高度增加。说明在未设置元素高度时,设置行高会撑起父级的高度,且文字垂直居中。
第二问题:div的height与line-height的大小关系不同时,会有什么显示结果呢?

<div class="demo">测试</div>

(1)当height=line-height时:

.demo{
	text-align:center;
	background:red;
	font-size:18px;
	width:300px;
	height:100px;
	line-height:100px; 		 
	}

效果如图:
在这里插入图片描述
(2)当height<line-height时:

.demo{
	text-align:center;
	background:red;
	font-size:18px;
	width:300px;
	height:70px;
	line-height:100px; 		 
	}

效果如图:
CSS样式:line-height、height与font-size的联系
(3)当height>line-height时:

.demo{
	text-align:center;
	background:red;
	font-size:18px;
	width:300px;
	height:140px;
	line-height:100px; 		 
	}

效果如图所示:
CSS样式:line-height、height与font-size的联系
总结:在给定元素高度时,高度等于行高,文字会垂直居中。当行高值减小时,字体会向上运动。当行高值增大时,字体会向下运动。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/35192.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注