温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css中行高指的是什么

发布时间:2021-04-27 09:39:50 来源:亿速云 阅读:318 作者:小新 栏目:web开发

小编给大家分享一下css中行高指的是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。

行高是包括内容区与以内容区为基础对称拓展的空白区域;一般情况下,也可以认为是相邻文本行基线间的垂直距离。在css中可以使用line-height属性设置行高;该属性设置行间的距离(行高),不允许使用负值。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

1.  基线、底线、顶线

css中行高指的是什么

  • 行高是包括内容区与以内容区为基础对称拓展的空白区域;一般情况下,也可以认为是相邻文本行基线间的垂直距离。

  • 基线并不是汉字的下端沿,而是英文字母"x"的下端沿

2.  行距、行高

css中行高指的是什么

3.  内容区

css中行高指的是什么

  • 底线和顶线包裹的区域,实际中不一定看得到,但却是存在。

4.  行内框

css中行高指的是什么

  • 行内框只是一个概念,它无法显示出来,但是它又确实存在

  • 它的高度就是行高

  • 在没有其他因素(padding)影响的时候,行内框等于内容区域

5.  行框

css中行高指的是什么

  • 行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框

  • 行框高度等于本行内所有元素中行高最大的值

元素对行高的影响

  • 对于行内元素如em、strong、span和等,其padding、margin、border-top、border-bottom 不会增加行高。
    padding会覆盖;margin将重置为0;border-top和border-bottom同样会覆盖。
    padding-left、padding-right、border-left和border-right可用。

  • img元素会影响行高

  • 设置行内元素的padding、border和margin并不会撑大外层元素的高度,如下图:css中行高指的是什么

6.  设置行高

在CSS中我们可以使用line-height属性来设置行高。line-height属性可用于设置行间的距离(行高),不允许使用负值。

line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p.small {
				line-height: 90%
			}
			
			p.big {
				line-height: 200%
			}
		</style>
	</head>

	<body>

		<p>
			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>

	</body>

</html>

效果图:

css中行高指的是什么

看完了这篇文章,相信你对“css中行高指的是什么”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI