IFC布局规则:
在一个行内格式化上下文中,盒是一个接一个水平放置的,从包含块的顶部开始
这些盒之间的水平
margin
,border
和padding
都有效盒可能以不同的方式竖直对齐:以它们的底部或者顶部对齐,或者以它们里面的文本的基线对齐
行盒(line box)
包含来自同一行的盒的矩形区域叫做行盒(line box)
line box
的宽度由包含块和float
情况决定,一般来说,line box
的宽度等于包含块两边之间的宽度,然而float
可以插入到包含块和行盒边之间,如果有float
,那么line box
的宽度会比没有float
时小line box
的高度由line-height
决定,而line box
之间的高度各不相同(比如只含文本的line box
高度与包含图片的line box
高度之间)line box
的高度能够容纳它包含的所有盒,当盒的高度小于行盒的高度(例如,如果盒是baseline
对齐)时,盒的竖直对齐方式由vertical-align
属性决定当一行的行内级盒的总宽度小于它们所在的
line box
的宽度时,它们在行盒里的水平分布由text-align
属性决定。如果该属性值为justify
,用户代理可能会拉伸行内盒(不包括inline-table
和inline-block
盒)里的空白和字(间距)
line box与float,vertical-align,text-align
行内盒(inline box)
一个
inline box
是一个(特殊的)行内级盒,其内容参与了它的包含行内格式化上下文当一个
inline box
超出一个line box
的宽度时,它会被分成几个盒,并且这些盒会跨多line box
分布。如果一个inline-block
无法分割(例如,如果该inline box
含有一个单个字符,或者特定语言的单词分隔规则不允许在该inline box
里分隔,或如果该inline box
受到了一个值为nowrap
或者pre
的white-space
的影响),那么该inline box
会从line box
溢出当一个
inline box
被分割后,margin
,border
和padding
在发生分割的地方(或者在任何分割处,如果有多处的话)不会有可视化效果同一个
line box
里的inline box
也可能因为双向(bidirectional)文本处理而被分割成几个盒
需要盛放(hold)一个行内格式化上下文中的行内级内容时,创建一个line box
。不含文本、保留空白符(preserved white space)、margin
,padding
或者border
非0的行内元素、其它流内内容(例如,图片,inline block
或者inline table
),并且不以保留换行符(preserved newline)结束的line box
必须被当作一个0高度的line box
,为了确定它里面所有元素的位置,而其它时候(for any other purpose)必须当它不存在
行高(line-height)
如图,我们就知道了,在CSS中,line-height
不是相邻文本行间上一个baseline
与下一文本行baseline
之间的距离,而是line box
的高度,也就是相邻文本行间底线的距离
原文链接:Deep dive CSS: font metrics, line-height and vertical-align
line-height与可替换元素,非替换元素以及vertical-align
在例1中,决定line box
高度的是line-height
值,但是实际上是content area
以及vertical spacing
决定的,line-height
=content area
+vertical spacing
需要注意的是,content area
不等于font-size
,只有在simsun(宋体)
下,两者相等
通过上面几个例子,可以得出以下结论:
计算
line box
中每个行内级盒的高度时,对于可替换元素,inline-block
元素和inline-table
元素,这个值就是其margin box
的高度;对于inline box
,这个值是其line-height
行内级盒是根据其
vertical-align
属性竖直对齐的.如果它们是top
或者bottom
对齐,它们必须对齐得让line box
高度最小化.如果这样的盒足够高,存在多个解,而CSS 2.1没有定义line box
基线的位置line box
高度是最高的盒的top
与最低的盒的bottom
之间的距离
空行内元素生成空的
inline box
,这些盒仍然具有margin
,padding
,border
和line height
,并因此会影响这些计算,就像有内容的元素一样
行高的属性值
值 | 描述 |
---|---|
normal | 默认属性值.跟着用户的浏览器走,且与font-size关联,一般来说normal值接近于line-height:1.2 |
number | 根据当前元素的font-size大小计算 |
length | 使用具体长度值作为行高值 |
% | 使用百分比值作为行高值,相对于设置了该line-height属性的元素的font-size大小计算 |
inherit | 行高继承.IE8+ |
在百分比行高值中,继承的不是line-height:150%
,而是font-size:16px
与line-height:150%
的行高值24px;
在number行高值中,line-height
会根据当前元素的font-size
大小进行计算,可以实现相应的比例缩放,所以一般建议使用number值
行高与图片
在例1中,我们知道了图片是基于baseline
对齐的,所以行高影响的是文本的高度,而不是图片的高度
在例2中,我们放置了单张图片,在父容器使用text-align:center
,图片受到影响,原因是strut
对于一个内容由内联级元素组成的块容器元素,'line-height'指定了元素内行盒的最小高度。这个最小高度包含基线上方的最小高度和下方的最小深度,就像每个行盒以一个具有该元素的字体和行高属性的0宽内联盒开始。我们把这种假想盒叫做"strut"(这个名字是受TeX的启发)
后面的几个例子是图片去除缝隙的解决方案,分别是:
图片
display:block
图片
vertical-align:bottom
父元素设置
line-height:0
原因是当line-height:0
时,行盒的基线会上移
行高的实际应用
vertical-align
该属性会影响由一个行内级元素生成的盒的行盒内部的竖直定位
默认情况下,inline
,inline-block
以及table-cell
可以应用vertical-align
值 | 描述 |
---|---|
length | 把该盒提升(正值)或者降低(负值)这个距离。值'0cm'表示与“基线”相同 |
% | 把该盒提升(正值)或者降低(负值)这个距离('line-height'值的百分比)。值'0%'表示与“基线”相同 |
top | inline/inline-block 元素:元素顶部和整行的顶部对齐,table-cell 元素:单元格顶部padding 边缘和表格行的顶部对齐 |
bottom | inline/inline-block 元素:元素底部和整行的底部对齐, table-cell 元素:单元格底部padding 边缘和表格行的底部对齐 |
baseline | 把盒的基线与父级盒的基线对齐。如果该盒没有基线,就把bottom margin边和父级的基线对齐 |
middle | 把该盒的竖直中点和父级盒的基线加上父级的1/2x-height对齐 |
text-top | 把该盒的top和父级的内容区(content area)的top对齐 |
text-bottom | 把该盒的bottom和父级的内容区(content area)的bottom对齐 |
sub | 把该盒的基线降低到合适的位置作为父级盒的下标(该值不影响该元素文本的字体大小) |
super | 把该盒的基线提升到合适的位置作为父级盒的上标(该值不影响该元素文本的字体大小) |
在数值/百分比值中,vertical-align
可以用负值,而且百分比值提升或降低对应的是line-height
值
去除图片空隙的方法除了上面的几个之外,还包括:
图片
vertical-align:top
,vertical-align:middle
line-height
为number时,font-size:0
在table-cell
中,高度不足会使用padding
填充
这个例子用到的也是父元素font-size:0
,图片垂直中心点会上移,并与容器垂直中心点重合,但是这种方法有缺陷,因为如果后面需要插入问题的时候,不会显示出来
这里,我们在图片后面插入了一个空span
并且设置为vertical-align:middle
,两者都往下偏移,然后垂直中心点重合
vertical-align:text-bottom与表情图片文字对齐
例1中,baseline
对齐表情会略微高过文字
例2中,bottom
对齐容易受到其它行内元素影响,比方说插入一张vertical-align:top
的图片
例3中,middle
需要注意图片的大小,图片过大,图片会相对于文字下沉,而且在IE6/7中有兼容性问题
例4中,text-bottom
是比较合适的用法,因为它不受行高和其它行内元素影响
vertical-align:text-bottom与baseline
在例1中,图片下面有个很大的空白区,它的原因是图片和X与父级的content area
底部对齐,而line-height:250px;
底部的空白区是X的下边距
在例2中,图片和X都vertical-align:top
,也就是与父级的content area
顶部对齐,这时,图片后面的普通文本是line-height:250px
的文本,图片下方的空白相当于文本的下边距
vertical-align与line-height
在上面的例子中,最后一行图片的的空隙明显要比图片默认情况下的空隙大,这是为什么呢,我们先看一个例子
在例1中,我们定义了一个空的inline-block
盒以及一个带字符的inline-block
盒,第一个盒子的底边缘和第二个盒子的baseline
对齐,也就是说,空inline-block
盒子的底边缘是它的基线
在例2中,我们设置了line-height:0
,此时,一个0高度的inline-block
有一个有高度的字符,所以它的半间距等于负的字符/2,也就是inline-block
会下沉1/2个字符,盒子的上边缘在字符的中心点上
在CSS标准中是这样写的:
'inline-block'(盒)的基线是它的最后一个常规流中的行盒的基线,除非它没有流内行盒或者它的'overflow'属性的计算值不为'visible',此时基线是bottom margin边
所以,空隙过大的原因是,图片是baseline
对齐的,而line-height:0
时,字符X会下沉1/2,这里多出来的空隙是1/2baseline
的高度
修复的方法:
父容器
line-height:0
,最后一个空inline-block
插入一个字符,这时空隙就会消失元素
vertical-top
元素
vertical-bottom
需要注意的是,如果空inline-block
元素使用vertical-align:bottom
时,是元素底部与整个行盒底部对齐,也就是说要保证每个单独的元素都设置vertical-align:bottom
vertical-align与IE6/7
在IE6/7下使用vertical-align
图文一体化,图片上下留白相等,而现代浏览器则不一样
解决办法:在图片后面的文字inline-block
化
vertical-align实例
主体元素
inline-block
化添加一个宽度0高度100%的辅助元素
给这两个元素
vertical-align:middle