b)inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
2. 理解了上面的基础知识后,就可以学习什么是 Formatting Context
1) BFC(Block formatting context) : "块级格式化上下文"。它是一个独立的渲染区域,只有block-level box参与, 它规定了内部的block-level box如何布局,并且与这个区域外部毫不相干。
2) 如何让一块区域具有BFC的渲染规则:既然上文提到BFC是一块渲染区域,那这块渲染区域到底在哪,它又是有多大,这些由生成BFC的元素决定,CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
(1)根元素(html、body)
(2)float的值不为none(left, right)
(3)overflow的值不为visible(hidden, scroll, inherit, auto..)
(4)display的值为inline-block、table-cell、table-caption
(5)position的值为absolute或fixed
(1)能满足条件形成BFC渲染区域元素的子元素(block-level box)会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部(一个矩形),两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
(2)能满足生成BFC元素的子元素中,每一个子元素的外边距与包含块的左边界相接触,(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。
上面的描述具有高度的抽象性,不是很容易理解,将它拆分如下成更加细致化的BFC布局规则(切记下面布局的基础是block-level box):
a)具有BFC渲染区域的元素内部的Box(block level)会在垂直方向,一个接一个地放置。
b)具有BFC渲染区域的元素内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
c)每个子元素(具有BFC渲染区域的元素内部的子元素)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
d)BFC的区域不会与float box重叠(这个特性的前提条件是对同一层级的BFC渲染区域和浮动元素对应生成的BFC渲染区域)。
e)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。)。反之也如此。
f)计算BFC的高度时,浮动元素也参与计算(这个特性的前提条件是对父级的BFC渲染区域和子浮动元素对应生成的BFC渲染区域在计算父元素高度时,需要包含子浮动元素的高度才可以,这样才能避免影响到该BFC外部区域)
Block元素会扩展到与父元素同宽,所以block元素会垂直排列
垂直方向上的两个相邻DIV的margin会重叠,而水平方向不会(此规则并不完全正确)
浮动元素会尽量接近往左上方(或右上方)
为父元素设置overflow:hidden或浮动父元素,则会包含浮动元素
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
3. 产生折叠的必备条件:margin必须是邻接的!而根据w3c规范,两个margin是邻接的必须满足以下条件:
(所谓的折叠的前提是在具有BFC渲染区域的内部的block-level Box)
(1)必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。
(2)没有线盒,没有空隙(clearance,下面会讲到),没有padding和border将他们分隔开
(3)都属于垂直方向上相邻的外边距,可以是下面任意一种情况
a) 元素的margin-top与其第一个常规文档流的子元素的margin-top(子父关系,也即是具有BFC的盒子和内部的第一个block-level Box)
b) 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top(兄弟关系BFC盒子内部的block-level box之间)
c) height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom(子父关系,也即是具有BFC的盒子和内部的第一个block-level Box)
d) 高度为0并且最小高度也为0,不包含常规文档流的子元素,并且自身没有建立新的BFC的元素的margin-top和margin-bottom
4. 以上的条件意味着下列的规则:
浮动元素不与任何元素的外边距产生折叠(包括其父元素和子元素)
绝对定位元素不与任何元素的外边距产生折叠
inline-block元素不与任何元素的外边距产生折叠
一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠,除非它们之间存在间隙(clearance)。
一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠,条件为父元素不包含 padding 和 border ,子元素不包含 clearance。
一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠,条件为父元素不包含 padding 和 border ,子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素,并且其 'height' 为 0 或 'auto', 'min-height' 为 '0',其里面也不包含行盒(line box),其自身的 margin-top 和 margin-bottom 会折叠。