摘要：如果该属性值为，用户代理可能会拉伸行内盒不包括和盒里的空白和字间距与，，行内盒一个是一个特殊的行内级盒，其内容参与了它的包含行内格式化上下文当一个超出一个的宽度时，它会被分成几个盒，并且这些盒会跨多分布。
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实例不固定尺寸图片或多行文字垂直居中
主体元素inline-block化
添加一个宽度0高度100%的辅助元素
给这两个元素vertical-align:middle
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111969.html
摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...
摘要：块级盒参与块格式化上下文。行内级盒参与行内格式化上下文块格式化上下文行内格式化上下文相对定位浮动盒就是一个在当前行向左或向右移动的盒。浮动绝对定位绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中全部移除不会影响后面的兄弟。 在可视化格式模型(Visual formatting model)当中,文档树中的每个元素根据其盒模型生成0个或多个盒.这些盒的布局由(以下因素)...
摘要：块级盒参与块级格式上下文行内级盒参与行级格式上下文。两个相邻盒子的垂直间距决定于属性。水平和在这些盒子中被平分。的宽度由浮动情况和它的包含块决定。当一个行内盒子被分割，分割发生则和便没有了视觉效果。参考神奇背后的原理清除浮动与与 BFC与IFC BFC与IFC的参与者 Boxes in the normal flow belong to a formatting context, wh...
摘要：官方说法就是它规定了用户端在媒介中如何处理文档树。是的包含块，同时又是的包含块，不是绝对的。因此称为匿名盒子。行内盒子行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文的创建。如果只有一个值指定为，则其使用的值来自相等。 作者：陈大鱼头 github： KRISACHAN 盒模型 The CSS box model describes the rectangular b...
摘要：视觉格式化模型浏览器在解析渲染我们所写的内容，顺序渲染普通文档流。渲染结果如下图这儿有一个知识点文档流按我的理解就是在浏览器渲染显示的一个模式，这个模式的特点自上而下，从左到右排列规则。如果不特殊指定，浏览器会默认当前的渲染是按文档流模式。 CSS视觉格式化模型 浏览器在解析渲染我们所写的html内容，顺序渲染（普通文档流）。 1 2 3 4 ...
摘要：属于同一个的两个相邻的会发生重叠。的区域不会与重叠。计算的高度时，浮动元素也参与计算。给添加，触发新的，则行内级格式化上下文如何生成由的非替换元素生成。元素会位于与与之间，使得宽度缩短。 block-level box: display属性为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context...
阅读 708·2021-11-08 13:22
阅读 2812·2021-09-29 09:45
阅读 2777·2021-09-09 11:52
阅读 2225·2019-08-30 13:20
阅读 3702·2019-08-29 13:28
阅读 1312·2019-08-29 12:32
阅读 2530·2019-08-29 11:10
阅读 1598·2019-08-26 13:34
