1-1-8-2.position跟display、float、margin collapse、overflow这些特性相互叠加

拆成两个点来回答:1、'display'、'position' 和 'float' 的相互关系;2、position跟display、overflow、float下的margin collapse。

一、'display'、'position' 和 'float' 的相互关系

[]!(http://www.w3help.org/zh-cn/kb/009/009/display_float_position.png)

0.转换对应表:  

设定值:inline-table             计算值:table
设定值:inline,inline-block, table-row-group, table-column, table-column-group, 
table-header-group, table-footer-group, table-row, table-cell, table-caption, 
 run-in                            计算值:block
设定值:其他                        计算值:同设定值

1. 'display' 的值为 'none'
如果 'display' 的值为 'none',那么 'position' 和 'float' 不起作用。在这种情况下,元素
不产生框。因此浮动和定位无效。

2. 'position' 的值是 'absolute' 或 'fixed'
否则,如果 'position' 的值是 'absolute' 或 'fixed',框就是绝对定位的,'float' 计算后的
值应该是 'none',并且,'display' 会被按照上表设置。 框的位置将由 'top','right','bottom' 
和 'left' 属性和该框的包含块确定。

也就是说,"position:absolute" 和 "position:fixed" 优先级最高,有它存在的时候,浮动不起作
用,'display' 会被按规则重置。

3. 'float' 的值不是 "none"
如果 'float' 的值不是 "none",该框浮动并且 'display' 会被按照转换对应表设置。

4. 元素是根元素(没有父元素就是根元素)
如果元素是根元素,'display' 的值按照转换对应表设置。

5. 否则,应用指定的 'display' 特性值。

二、position跟display、overflow、float下的margin collapse

1.行内元素与块级函数的三个区别
  a. 行内元素会在同一行排列,水平方向排列

     块级元素各占据一行,垂直方向排列,后面接着一个断行。
  b.行内元素设置width和height无效(可以设置line-height),margin和padding上下无效
  c.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。

扩展:既具有block的宽度高度特性又具有inline的同行特性。低版本IE是不支持inline-block的

2.标准模式与混杂模式下的盒模型
  a.标准模式下盒子的实际宽度和高度为:

  width/height + padding + border

  b.混杂模式下盒子的实际宽度为:css中设定的width值,高度为设置的height值。当然在没有设置
  overflow的情况下,若盒子内容、内边距、或是边框的值较大,会把盒子撑开,实际宽度和高度则大于设定值。

3.什么是BFC?
  a.BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,是一个独立的布局环境,我们可以理解为
  一个箱子,箱子里面摆放的块级盒子是不受外界的影响的。
  b.BFC知识点集中在float、绝对定位、margin collaspe中。
  c.块级元素会自动生成一个block-level box(块级盒)。

  w3c规范中的BFC定义: 
  第一段:浮动元素、绝对定位元素,不是块级盒的块级包含块(比如inline-block、table-cell、
  table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。

  第二段:在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的,相邻两个盒子之间
  的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。
  参与BFC的布局的只有普通流normal flow中的块级盒,而float、position值不为relative\static的元素
  是脱离BFC这一布局环境的,不参与BFC的布局

  折叠的结果:

       两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
       两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
       两个外边距一正一负时,折叠结果是两者的相加的和。

  第三段:在一个块级排版上下文中,每个盒子的左外边是触碰到包含块的左边的(对于从右向左的排版,则相反),
  即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的),除非这个盒子新建了一个块
  级排版上下文(在某些情况下这个盒子自身会因为float而变窄)。  

4.margin collapse

产生折叠的必备条件:margin必须是邻接的!根据w3c规范,两个margin是邻接的必须满足以下条件:

 a.必须是处于常规文档流(非float和绝对定位)的块级盒子,并且处于同一个BFC当中。
 b.没有线盒,没有空隙(clearance,下面会讲到),没有padding和border将他们分隔开

都属于垂直方向上相邻的外边距,可以是下面任意一种情况

 a.元素的margin-top(必须是margin-top)与其第一个常规文档流的子元素的margin-top
 b.元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
 c.height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
 d.高度为0并且最小高度也为0,有垂直外边距的空元素

不产生折叠

 a.使元素成为BFC

 b.它们之间存在间隙,特殊间隙clearance

     一个BFC有三个div,第一个和第三个div没有浮动且没有clear,第二个浮动,那么第一和第三个div会发
     生collpse;第二种情况,就是第三个有clear属性,那么第三个的块盒的border-top恰好与第二个浮
     动元素的块盒的margin-bottom相邻,就有间隙了

 d.inline-block元素不与任何元素的外边距产生折叠。
     margin collapsing不发生在IFC
     inline-block不符合w3c规范所说元素必须是块级盒子的条件,因为规范中又说明,块级盒子的display
     属性必须是以下三种之一:'block', 'list-item', 和 'table'。

注意:margin collapsing与方向无关,更改了body的writing-mode,于是叠加发生在了水平方向
    (仅ie可看)

    body {
      writing-mode:tb-rl;
    }

results matching ""

    No results matching ""