CSS 行高和对齐

最新推荐文章于 2023-05-24 14:34:04 发布

weixin_34018169

最新推荐文章于 2023-05-24 14:34:04 发布

阅读量168

点赞数

原文链接：https://my.oschina.net/honchy/blog/411764

版权

为什么80%的码农都做不了架构师？>>>

##文本垂直对齐 ###行高 line-height属性是制定文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或减少多少。line-height控制了行间距，这是文本行之间超出字体大小的额外空间。换句话说，line-height值和字体大小之差就是行间距。在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离。注意它定义的是最小距离，而不是一个绝对数值，文本基线拉开的距离可能比line-height值更大。line-height并不影响替换元素布局，不过确实可以应用到替换元素。 ###构造文本行

行内框文本行中的每个元素都会生成一个内容区，这由字体的大小确定。这个内容则会生成一个行内框(inline box),如果不存在其他因素，这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是增加或减少各行内框高度的因素之一。要确定一个给定元素的行间距，只需要将line-height的计算值减去font-size的计算值。这个值就是总的行间距。行间距可能为负。行间距再除以2，将间距的一半分别应用到内容区的顶部和底部。其结果就是该元素的行内框。
行框一旦给定内容行已经生成了所有行内框，接下来在行框的构造中就会考虑这些行内框。行框的高度恰好足以包含最高行内框的顶端和最低行内框的底端。
指定line-height值 line-height如果取默认值normal，用户代理必须计算行间的垂直空间。不同的用户代理计算出的值可能不同，不过通常都是字体大小的1.2倍，这使得行框要高于给定元素的font-size值。

###行高和继承当一个块级元素从另一个元素继承line-height时，问题会变得更为复杂。line-height值从父元素继承时，要从父元素计算而不是在子元素计算。

	body {font-size:10px;}
	div {line-height:1em;}
	p {font-size : 18px}
	
	<div>
		<p>
			这段文字从div继承了line-height，div的字体大小时10，所以计算出来的大小是10px。
		</p>
	</div>

解决这个问题的一种方式是设置缩放因子，缩放因子将是继承值而不是计算值。这个数会应用到该元素及其所有子元素，所以各元素都根据其自己的font-size计算line-height。

	body {font-size : 10px;}
	div {line-height : 1.5;}
	p {font-size:18px;}

尽管看上去，line-height在每个文本行的上面和下面平均分配了额外空间，实际上，它是在行内元素的内容区顶部和底部增加（或减少）一定量来创建一个行内框。 ###垂直对齐文本在CSS中，vertical-align 属性只应用于行内元素和替换元素，如图像和表单输入元素。vertical-align属性不能继承。 vertical-align 只接受8个关键字，一个百分比数字或者一个长度值。

基线对齐 baseline要求一个元素的基线与其父元素的基线对齐。如果一个垂直对齐元素没有基线，比如图片输入框，那么该元素的低端与其父元素的基线对齐。这个对齐规则很重要，因为它使得一些web浏览器总把替换元素的底边放在基线上，即使该行中没有其他文本。例如，假设一个表单元格中只有一个图像。这个图像可能实际在基线上，不过在某些浏览器中，基线下面的空间会导致图像下出现一段空白。另外一些浏览器则会把图像“紧包”在表单元格中，所以不会出现空白。
上标和下标 vertical-align:sub 声明会使一个元素变成下标，这意味着其基线（或者如果这是一个替换元素，则是其低端）相对于其父元素的基线降低。规范并没有定义元素降低的距离，所以对于不同的用户代理，这个距离可能有所不同。super更sub相反，相对父基线升高。 sub和super不会改变元素字体大小，下标或者上标元素中的所有文本默认地都应当与父元素中的文本大小相同。
底端对齐 bottom将元素行内框的低端与行框的低端对齐。 text-bottom 是指行内文本的底端。替换元素或任何其他类型的非文本元素会忽略这个值。对于这些元素（替换元素或者非文本元素），将考虑一个“默认”的文本框。这个默认框由父元素的font-size得到。要对齐的元素的行内框底端再与这个默认文本框的底端对齐。
顶端对齐 top与bottom相反，text-top与text-bottom相反
居中对齐 middle 往往（不总是）应用于图像。middle会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐，这里的1ex相对于父元素的font-size定义。因为大多数用户代理都把1ex处理为0.5em，middle往往将元素的垂直中点与父元素基线上方0.25em处的一个点对齐。不过有些浏览器确实会计算准确的x-height。
百分数使用百分数，会把元素的基线（或替换元素底边）相对于父元素的基线升高或降低制定的量（你制定的百分数要计算为该元素line-height的百分数，而不是相对于其父元素的line-height）。正则升高，负则降低。
长度对齐它把一个元素升高或降低指定的距离，与对齐前相比。要认识到垂直对齐的文本并不会成为另一行的一部分，它也不会覆盖其他行中的文本。所有垂直对齐的元素都会影响行高。应该记得行框的描述，其高度要足以包含最高行内框的顶端和最低行内框的低端。这包括因垂直对齐上升或下降的行内框。

转载于:https://my.oschina.net/honchy/blog/411764