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