02_简单说一下盒模型，说下如何利用BFC解决外边距重叠的问题

一、基本概念

盒子模型就是网页布局中的一种手段，包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。

要点：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。


    
    

  
.parent {
    width: 400px;
    height: 400px;
    background: #ccc;
}
.child1, .child2 {
    width: 100px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 10px solid #000;
    background: #f00;
}

二、盒模型的两种标准

要点：

标准模型中盒模型的宽高只是内容（content）的宽高
IE模型中盒模型的宽高是内容（content）+填充（padding）+边框（border）的总宽高

三、CSS3 box-sizing 属性

box-sizing 是用于告诉浏览器如何计算一个元素的总宽度和总高度

标准盒模型 box-sizing: content-box

width = content width

height = content height

IE盒模型 box-sizing: border-box

width = border + padding + content width

height = border + padding + content height

  
        
        
  
  
  .content-box { 
    box-sizing: content-box; 
  }
  .border-box { 
    box-sizing: border-box;
  }

四、margin折叠问题

css2.1盒子模型中规定：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔。

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，所结合成的外边距称为折叠外边距。折叠的结果按照如下规则计算：

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

产生折叠的必备条件：margin必须是邻接的!

解决嵌套元素产生折叠问题的方法：

给父元素设置padding
给父元素设置透明border

  .parent {
   /* padding-top:1px; */
    border: 1px solid rgba(0,0,0,0);
    width: 400px;
    height: 400px;
    background: #ccc;
  }

五、什么是BFC

1、BFC 定义

BFC（Block formatting context）直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level Box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

Box盒子的类型：

block-level box : display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box : display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

2、如何创建BFC

float的值不是none
position的值不是static或者relative
display的值是inline-block、table-cell、flex、table-caption或者inline-flex
overflow的值不是visible

3、BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

4、BFC的应用场景

（1）利用BFC避免margin重叠

解决嵌套元素margin重叠，父元素可选择添加以下样式之一

    padding-top:1px;
    border: 1px solid rgba(0,0,0,0);
    display: inline-block;
    display: table;
    display: table-caption;
    display: flex;
    display: inline-flex;
    float: left;
    position: absolute;
    overflow:hidden;

解决同级相邻元素margin重叠，任意相邻元素可选择添加以下样式之一

    display:inline-block;
    display:table-caption;
    display:inline-flex;

（2）自适应两栏布局

要点：BFC的区域不会与float box重叠


    LEFT
    RIGHT


.left {
     float: left;
     width: 200px;
     height: 150px;
     line-height: 150px;
     text-align: center;
     font-size: 40px;
     background: #00f;
}
.right {
     overflow: hidden;
     height: 300px;
     line-height: 300px;
     text-align: center;
     font-size: 40px;
     background: #f00;
}

（3）清除浮动

当我们不给父节点设置高度，同时给子节点设置了浮动的时候，就会发生高度塌陷，这个时候我们就要清除浮动
要点：计算BFC的高度时，浮动元素也参与计算


    
    


.parent {
    overflow: hidden;
    width: 300px;
    border: 5px solid #f00;
}
.child {
    float: left;
    width:100px;
    height: 100px;
    border: 5px solid #00f;
}