css中行高指的是什么

发布时间:2021-04-27 09:39:50 作者:小新
来源:亿速云 阅读:341

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

什么是css

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

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

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

1.  基线、底线、顶线

css中行高指的是什么

2.  行距、行高

css中行高指的是什么

3.  内容区

css中行高指的是什么

4.  行内框

css中行高指的是什么

5.  行框

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中行高指的是什么”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. CSS如何控制行高
  2. CSS中%指的是什么

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

css

上一篇:MySQL索引的底层实现原理是什么

下一篇:golang interface如何判断为空nil的实现代码

相关阅读

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

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