码迷,mamicode.com
首页 > 其他好文 > 详细

浅谈IFC

时间:2019-03-21 11:48:18      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:可视化   尺寸   换行   固定   body   class   兼容   字符   overflow   

IFC布局规则:

  • 在一个行内格式化上下文中,盒是一个接一个水平放置的,从包含块的顶部开始

  • 这些盒之间的水平marginborderpadding都有效

  • 盒可能以不同的方式竖直对齐:以它们的底部或者顶部对齐,或者以它们里面的文本的基线对齐

行盒(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-tableinline-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或者prewhite-space的影响),那么该inline box会从line box溢出

  • 当一个inline box被分割后,marginborderpadding在发生分割的地方(或者在任何分割处,如果有多处的话)不会有可视化效果

  • 同一个line box里的inline box也可能因为双向(bidirectional)文本处理而被分割成几个盒

需要盛放(hold)一个行内格式化上下文中的行内级内容时,创建一个line box。不含文本、保留空白符(preserved white space)、marginpadding或者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,borderline 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:16pxline-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

浅谈IFC

标签:可视化   尺寸   换行   固定   body   class   兼容   字符   overflow   

原文地址:https://www.cnblogs.com/jianxian/p/10570510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!