html里面的IFC？
inline formating context（IFC）内联格式化上下文
IFC跟BFC一样，它不是一个元素，不是一种属性，而是一种环境，一种上下文，一种布局特性。
在IFC中，内联元素在水平方向上一个接一个的排布，其中，容器之间水平方向上的margin，padding，border方向上是好使的。他们垂直方向上有很多种对其方式，比如居底部或顶端对齐，或者基线对齐。他们对齐完了之后形成的这个四方块儿区域，叫做一个line box（行框）。
一个line box的宽度由包含它的元素的宽度和包含它的元素里面有没有float元素来决定，而高度由内部元素中实际高度最高的元素而计算出来。
//其实这句话解释了为什么内联元素是不能设置垂直方向的padding,margin等，因为即使设置了，也不会影响line box的高度,可能会在每个浏览器的表现各异，但大多数不会达到预期的效果。
line box的高度是足够高来包含他内部的容器们的，也可能比它包含的容器们都高（比如在基线对齐的时候），当他包含的内部容器的高度小于line box的高度的时候，内部容器的垂直位置由自己的vertical这个属性来确定。当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个或者多个line box， line box们相互之间垂直方向不能分离，不能重叠。
一般来说，line box的左边缘挨着包含它的元素的左边缘，并且右边缘挨着包含它的元素的右边缘，浮动元素会在包含他们的元素的 边缘和line box的边缘之间，所以，虽然在同一个IFC下的line box们通常拥有相同的宽度（就是包含他们的容器的宽度），但是也会因为浮动元素的捣乱，导致line box们的可用宽度产生了变化不一样了。在同一个Ifc下的line box们的高度也会不一样（比如说，一个line box里有个比较大的image，他就高了）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFC应用实例</title>
<meta name="copyright" content="www.ohweb.cn" />
<meta name="author" content="weinan" />
</head>
<body>
<style>
/* comm 核心部分 */
.g-ifc-wrap:after,
.g-ifc-wrap-after{content:'';height:100%;width:0;display:inline-block;*display:inline;*zoom:1;margin-left:-5px;font-size:0;vertical-align:middle;}
.g-ifc-item{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
/* test */
#test{height:300px;width:500px;background-color:#878787;border:3px solid #526f39;}
#test p{background-color:#7ff30a;color:#000;font-weight:bold;}
</style>
<div id="test" class="g-ifc-wrap">
<p class="g-ifc-item">我想要基于外面的容器居中</p>
<img class="g-ifc-item" alt="我也是" src="http://dh2.kimg.cn/v/upload/20140325/9aa6e7f4e477d9af9c463c5604070ed4.jpg?v=1395739057" />
<!--[if lte IE 7]><span class="g-ifc-wrap-after"></span>< ![endif]-->
</div>
</body>
</html>
inline formating context（IFC）内联格式化上下文
IFC跟BFC一样，它不是一个元素，不是一种属性，而是一种环境，一种上下文，一种布局特性。
在IFC中，内联元素在水平方向上一个接一个的排布，其中，容器之间水平方向上的margin，padding，border方向上是好使的。他们垂直方向上有很多种对其方式，比如居底部或顶端对齐，或者基线对齐。他们对齐完了之后形成的这个四方块儿区域，叫做一个line box（行框）。
一个line box的宽度由包含它的元素的宽度和包含它的元素里面有没有float元素来决定，而高度由内部元素中实际高度最高的元素而计算出来。
//其实这句话解释了为什么内联元素是不能设置垂直方向的padding,margin等，因为即使设置了，也不会影响line box的高度,可能会在每个浏览器的表现各异，但大多数不会达到预期的效果。
line box的高度是足够高来包含他内部的容器们的，也可能比它包含的容器们都高（比如在基线对齐的时候），当他包含的内部容器的高度小于line box的高度的时候，内部容器的垂直位置由自己的vertical这个属性来确定。当内部的容器盒子太多了一个line box装不下来，他们折行之后会变成两个或者多个line box， line box们相互之间垂直方向不能分离，不能重叠。
一般来说，line box的左边缘挨着包含它的元素的左边缘，并且右边缘挨着包含它的元素的右边缘，浮动元素会在包含他们的元素的 边缘和line box的边缘之间，所以，虽然在同一个IFC下的line box们通常拥有相同的宽度（就是包含他们的容器的宽度），但是也会因为浮动元素的捣乱，导致line box们的可用宽度产生了变化不一样了。在同一个Ifc下的line box们的高度也会不一样（比如说，一个line box里有个比较大的image，他就高了）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IFC应用实例</title>
<meta name="copyright" content="www.ohweb.cn" />
<meta name="author" content="weinan" />
</head>
<body>
<style>
/* comm 核心部分 */
.g-ifc-wrap:after,
.g-ifc-wrap-after{content:'';height:100%;width:0;display:inline-block;*display:inline;*zoom:1;margin-left:-5px;font-size:0;vertical-align:middle;}
.g-ifc-item{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
/* test */
#test{height:300px;width:500px;background-color:#878787;border:3px solid #526f39;}
#test p{background-color:#7ff30a;color:#000;font-weight:bold;}
</style>
<div id="test" class="g-ifc-wrap">
<p class="g-ifc-item">我想要基于外面的容器居中</p>
<img class="g-ifc-item" alt="我也是" src="http://dh2.kimg.cn/v/upload/20140325/9aa6e7f4e477d9af9c463c5604070ed4.jpg?v=1395739057" />
<!--[if lte IE 7]><span class="g-ifc-wrap-after"></span>< ![endif]-->
</div>
</body>
</html>
扫一扫
6033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
