浅谈IFC

Posted 2021-02-14 jianxian

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）必须当它不存在

inline box与断行，溢出点击预览

行高(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与百分比值点击预览

在百分比行高值中,继承的不是line-height:150%,而是font-size:16px与line-height:150%的行高值24px;

line-height与number值点击预览

在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填充

vertical-align:middle与垂直居中点击预览

这个例子用到的也是父元素font-size:0,图片垂直中心点会上移,并与容器垂直中心点重合,但是这种方法有缺陷,因为如果后面需要插入问题的时候,不会显示出来

vertical-align:middle与垂直居中修改版点击预览

这里,我们在图片后面插入了一个空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实例

不固定尺寸图片或多行文字垂直居中点击预览

1. 主体元素inline-block化

2. 添加一个宽度0高度100%的辅助元素

3. 给这两个元素vertical-align