css中行高指的是什么

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

公司主营业务：成都做网站、成都网站设计、成都外贸网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出抚顺免费做网站回馈大家。

什么是css

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

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

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

1.  基线、底线、顶线

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

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

2.  行距、行高

3.  内容区

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

4.  行内框

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

• 它的高度就是行高

• 在没有其他因素（padding）影响的时候，行内框等于内容区域

5.  行框

• 行框（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并不会撑大外层元素的高度，如下图：

6.  设置行高

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

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

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

示例：

	
		
		
			p.small {
				line-height: 90%
			}
			
			p.big {
				line-height: 200%
			}
		
	

	

		

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

		
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		


		
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		


	

效果图：

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

文章名称：css中行高指的是什么
文章分享：http://scjbc.cn/article/piojii.html