IFC(行内格式化上下文)
IFC(Inline formatting contexts),即行内格式化上上下文。 参考css2.1中的一段话:
翻译过来就是:
这段话简单地罗列了参与行内格式化上下文的元素。下面先来理些概念。 一、行内元素通常是display:inline的元素,当然也包括inline-block和inline-table,这些元素生成行内级元素,他们会在水平方向一个接一个排列,如果宽度不够排列将生成多行。而这些盒子中只有inline是行内盒,并参与生成行内格式化上下文,其他不参与上下文的行内级元素被称为原子行内级盒。即:
二、行盒包含同一行内的所有盒的矩形区域是一个行盒。于是我们可以得到以下结论: 三、行内盒高度计算1、行内盒的高度和宽度设置是无效的,所以他们的高度是有line-height决定的。当然,行内盒是可以有外边距、边框和内边距的。 2、行内盒根据他的vertical-align定位。 inline的span元素和替换元素img,他们默认是按照基线对齐的(黑色的线),修改这两个元素的vertical-align: <div> <span style="border: 1px solid blue;vertical-align: middle;">我是span</span> <img style="border: 1px solid red;vertical-align: middle;" src="favicon.ico" alt=""> </div> 我们可以得到: 这样两个元素就居中显示了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |