1、盒子模型

什么是盒子模型

所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框(border)，填充(padding)，和实际内容(content)

常见的盒子模型：标准盒子模型和IE盒子模型

标准盒子模型

盒子的实际尺寸 = 内容（设置的宽/高） + 内边距 + 边框

如果使用标准模型宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)，padding 加 border 再加 content box。

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
复制代码

IE盒子模型

盒子的实际尺寸 = 设置的宽/高 = 内容 + 内边距 + 边框

现在高版本的浏览器基本上默认都是使用标准盒模型，而像 IE6 默认使用 IE 盒模型的
在 CSS3 中新增了一个属性 box-sizing，允许开发者来指定盒子使用什么标准，它有 2 个值：

content-box：标准盒模型；
border-box：IE 盒模型；

2、BFC

BFC（Block Formating Context）块级格式化上下文，是CSS中的一种渲染机制。是一个拥有独立渲染区域的盒子，规定了内部元素如何布局，并且盒子内部元素与外部元素互不影响。

BFC 渲染规则

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

如何创建 BFC？

根元素：html
非溢出的可见元素：overflow 不为 visible
设置浮动：float 属性不为 none
设置定位：position 为 absolute 或 fixed
定义成块级的非块级元素：display: inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

BFC的应用

1、两栏布局

BFC 的区域不会与 float 盒子重叠

 <div class="layout">
  <div class="aside">aside</div>
  <div class="main">main</div>
</div>


<style>
  .aside{
     width:120px;
     float:left;
  }
  .main{
    background-color: blue;
    overflow: hidden;
  }
</style>
复制代码

2、margin间距合并

属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠；

 <div class="parent">
   <div class="child child1">我是child1</div>
   <div class="child child2">我是child1</div>
 </div>
 
 <style>
    .child1{
      margin-bottom:10px;
      margin-top:10px;
      background-color: green;
    }
    .child2{
      background-color: red;
      margin-top:10px;
    }
 </style>
复制代码

我们以为child1和child2的间距会是20px，但是由于BFC的两个相邻盒子的 margin 会发生重叠，他们之间的间距会取最大的值作为结果，即10px，那如何解决呢？

再创建一个div父元素包裹，创建两个BFC，但是这样就改变了dom的结构，我们一般不建议这样做，我们直接设置一个margin值是两个值的和即可

 <div class="parent">
   <div class="child child1">我是child1</div>
   <div class="wrap"><div class="child child2">我是child1</div></div>
 </div>
 <style>
 
     .parent{
      background-color: blue;
    }
    .child1{
      margin-bottom:10px;
      margin-top:10px;
      background-color: green;
    }
    .child2{
      background-color: red;
      margin-top:10px;
    }
    .wrap{
      overflow: hidden;
    }
 </style>
复制代码

3、margin 塌陷

什么是margin塌陷，我们来看一段代码

<style>
   .parent{
      background-color: blue;
      height: 100px;
    }
    .child{
      margin-top:100px;
      height: 20px;
      background-color: green;
    }
</style>

 <div class="parent">
   <div class="child">我是child</div>
 </div>
复制代码

child并没有距离parent 100px，而是parent距离顶部100px，这就是margin塌陷，那如何解决呢？我们还是利用BFC ,给parent创建一个BFC

<style>
   .parent{
      background-color: blue;
      height: 100px;
      overflow:hidden;
    }
    .child{
      margin-top:100px;
      height: 20px;
      background-color: green;
    }
</style>

 <div class="parent">
   <div class="child">我是child</div>
 </div>
复制代码