当前位置: 首页 > Web前端 > CSS

IFC_0

时间:2023-03-31 12:52:02 CSS

IFCInlineFormattingContextsofCSS,也称为“内联格式化上下文”。如果满足以下任何条件,将生成IFC块级元素。形成条件很简单。需要注意的是,在IFC中插入块级元素时,会生成两个匿名块来分隔父元素。来吧,生成两个IFC,这里就不多介绍了。IFC布局规则子元素横向横向排列,纵向起点为元素顶部。子元素只会计算水平样式空间,[padding,border,margin],不会计算垂直样式空间,[padding,border,margin]。在垂直方向上,子元素会以不同的形式(vertical-align)对齐到一个可以完全包含一行上的框的矩形区域,称为该行的行框。行框的宽度由包含框和其中的浮动决定。IFC中的“linebox”一般会粘在左右两边的containingblock上,但是float元素会优先排列。IFC中“linebox”的高度由CSS行高计算规则决定,同一个IFC下的多个linebox高度可能不同。当行内级框的总宽度小于包含它们的行框时,它们的水平渲染规则由text-align属性的值决定。当一个“行内框”超过父元素的宽度时,它被拆分成多个框,这些牛分布在多个“行框”中。如果子元素没有设置强制换行,“行内框”不会被拆分,会溢出父元素。与BFC相比,IFC的规矩很多,很少有人会耐心阅读。通过几个例子,你可以在几分钟内大致了解它的特点。很多情况下,上下间距不生效。IFC可以用来解释.warp{border:1pxsolidred;显示:内联块;}.text{边距:20px;背景:绿色;}Text1Text2

左右边距拉长,但上边距和下边距没有拉长,符合IFC规范,只计算横向样式Control,不计算纵向样式空间。多个元素水平居中。warp{border:1pxsolidred;宽度:200px;文本对齐:居中;}.text{背景:绿色;}text1Text2
横向排列规则按照IFC容器的text-align值,可用于实现多个子元素的水平居中。float元素优先排列。warp{border:1pxsolidred;宽度:200px;}.text{背景:绿色;}.f-l{浮动:左;}这是文本1这是文本2Thisistext3ThisisItistext4
float属性值的IFC元素排在最前面,可用于添加"标签"在许多情况下文章段落的开头。最后,IFC还可以用来做很多其他的事情,比如:解决元素的垂直居中,以及多个文本元素排列不一致的问题。