摘要：相关内联格式上下文主要影响内布局的行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素都会共同生成一个行盒模型。
前言
通常情况下，要使元素排列在一行内，通常做法就是使用float，然后再清浮动。
如下：
但是如果要使其垂直居中，则必须手动调整，蓝色或者绿色块的位置，比较繁琐。
或者另外一种方法，使用inline-block或inline（即IFC），刚好在这里碰到了点坑。
相关cssIFC（Inline formatting contexts）内联格式上下文 ╮(￣▽￣)╭
主要影响IFC内布局的css
font-size
line-height
height
vertical-aligin
line-box行盒模型，这是一个显示区域，根据块状容器内，每一行的多个内联元素（inline-level element）都会共同生成一个行盒模型。
font-size常见的属性，用来指定文本类型节点的大小。IFC内的很多属性的值是基于这个的。
line-height & height行高在w3c中更明确的定义：
On a block container element whose content is composed of inline-level elements, "line-height" specifies the minimal height of line boxes within the element.The minimum height consists of a minimum height above the baseline and a minimum depth below it。
在一个由多个内联元素组成的块状容器内，"line-height"为内联元素的行盒模型指定了一个最低高度。
这个最低高度是分别由基线上的最小高度和基线下的最小深度组成。
盗张图的来示意下，从上到下四条线分别是顶线、中线、基线、底线。
那么行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离（实际在数值上，行高也等于其它相同颜色间的距离）。
换种思路来理解下行高。
实际上很多情况下，一个容器中是只有一行的即只有一条基线，行高是如何计算，以确保这个间距呢?
如下：
蓝色是容器的范围，边界线之间是一个line box。文字其中的内联元素。
所以，
当line-height > font-size时一个为被设定高度的容器被设定一个行高时，内联元内容的上下会增加2个空白内容的高度。而容器的高度也会撑开，使容器的高度与line-height相等。
a1 + b1 +c1 == line-height & a1 == c1
如果容器的高度已经被设定，那么超出容器下边界线的部分则不影响布局。
当line-height < font-size时，容器未被指定高度时，容器的上下两侧塌陷(类似于margin为负值的情况)，但上述公式仍成立。
a1（负值） + b1 + c1(负值) == line-height & a1 == c1
如下所示:
白色是塌陷的部分(即 a1 和 c1)，红色是line-height，如果把容器设置为 overflow:hidden,
那么就只能看见红色的部分。
如果容器被指定height高度时，
height > line-height，那么黄线会下移，红色部分会展示更多，
height < line-height，那么黄线会上移，红色的部分被遮盖的更多了。
所以在这里的情况是，
vertical-align决定容器高度的优先级 height > line-height > font-size
垂直对齐线，默认为baselien，来自W3C的定义：
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.
该属性影响由多个内联元素生成的盒模型组成的行内盒模型的垂直定位
vertical有几个特定的值，或者指定一个值。
English中文 中文English
给第一个span，设置60px的垂直偏移量，显示如下：
其中，黄色线就是基线（baseline），绿线和黄线的间隔即为60px。
这里会发现，容器（蓝色）的高度被撑高了。
容器的高度 height = line-height + vertical-align
当然同理,如果容器的高度被指定了，那么高度则不变，而超出的部分则不影响布局。如果设置overflow:hidden，超过的部分则不可见。
而vertical-align的其它特殊值，均可以看做一个根据容器高度而变化的相对值。
结论熟练使用inline-level element和行内布局的属性，以非常快速完成垂直居中和水平居中的效果，并且有良好的可维护性和拓展性。
参考W3C IFC
W3C line-height和vertical-aligin
line-height详解
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111100.html
摘要：居中问题居中问题定位不管用水平居中需要做如下处理定位不管用，水平居中需要做如下处理定位管用水平居中需要做如下处理定位管用，水平居中需要做如下处理定位加元素已知宽度定位加元素已知宽度父元素设置为子元素设置为距上，据左，然后减去元素自居中问题： 1.Fixed定位margin：0 auto;不管用，水平居中需要做如下处理： position: fixed; top: 0; bottom: 0; ...
摘要：前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐之前写过的写作建议和技巧，那么今天就来聊聊吧说到，每一个网页都离不开，但是对于，很多开发者的想法就是，只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。 1.前言 还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开c...
摘要：前言还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐之前写过的写作建议和技巧，那么今天就来聊聊吧说到，每一个网页都离不开，但是对于，很多开发者的想法就是，只要能用来布局，把效果图排出来就可以了，其它的细节或者优化，不需要怎么考虑。 1.前言 还有几天就到国庆中秋了，快要放假了，先祝大家节日快乐！之前写过js的写作建议和技巧，那么今天就来聊聊css吧！说到css，每一个网页都离不开c...
摘要：篇块级元素行内元素文档流将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。 CSS篇 1.块级元素 VS 行内元素 文档流!将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 块级元素：自动换行；垂直排列；width/height/margin/padding都可控制；默认宽度100%，除非设置width/margindiv , ...
阅读 1421·2021-11-22 13:54
阅读 4135·2021-09-22 15:56
阅读 1778·2021-09-03 10:30
阅读 1303·2021-09-03 10:30
阅读 2060·2019-08-30 15:55
阅读 1835·2019-08-30 14:13
阅读 2016·2019-08-29 15:19
阅读 2319·2019-08-28 18:13
