盒模型

组成

margin 外边距，可以当做盒子与盒子之间的距离

border 边框，可以当做是盒子的厚度

padding 内边距，可以当做盒子边框于其中容纳物的距离

content 内容， 即盒子中存放文本或图片的区域

标准模型和 ie 模型

• box-sizing: content-box 将盒子设置为标准模型（盒子默认为标准模型）

• box-sizing: border-box 将盒子设置为 IE 模型（也叫做怪异盒子)

标准模型

width = content

content-box  {
    width: 100px;
    height: 100px;
    border: 50px solid;
    padding: 50px;
}

标准

ie 模型

width = content + padding + border

怪异

怪异盒模型就不一样了，它把整个盒子看成是一个整体。给整个盒子一个宽高。如果你还给盒子设置了额外的边距和边框。那么中间的 content 蓝色部分就要受到挤压,变小。

bfc

什么是 BFC ： 块级格式化上下文

触发 BFC 的条件：

父级块框自带隐藏 BFC 属性 浮动元素 绝对定位元素（包括 absolute 和 fixed） 框类型 display 为:inline-block|table-cell|table-caption overflow 属性为 hidden|auto|scroll BFC 可以解决的问题：

1.（BFC 与 margin）同一个父级块框下，兄弟元素和父子元素的 margin 会发生重叠问题

2.（BFC 与 float）父元素高度塌陷问题、兄弟元素覆盖问题

BFC 与 margin margin 重叠的解决方法：让元素处于不同的 BFC 属性环境下。

BFC 的具体规则：

1. 内部的 Box 将会独占宽度， 且在垂直方向上一个接一个排列

2. box 在垂直方向上的间距由 margin 属性决定， 但是同一个 BFC 的两个相邻 box 的 margin 会出现编剧折叠现象。

3. 每个 box 在水平方向上的左边缘与 BFC 的左边缘相对齐，即使存在浮动也是如此。

4. BFC 区域不会与浮动元素折叠， 而是会依次排列

5. 浮动元素的高度也参与 BFC 的高度计算

有下面特点

• 边距折叠

• 清除浮动

• 自适应多栏布局

例题实战：

BFC 区域不会与浮动元素重叠， 而是会依次排列

* css{

  .left {
    width: 150px;
    height: 100px;
    float: left;
    background-color: rgb(68, 156, 28);
  }
  .right {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: rgb(25, 39, 161);
  }
}

* css{

  .app{
    display: flex;
    .left {
      width: 100px;
      height: 100px;
      background-color: rgb(68, 156, 28);
    }
    .right {
      width: 100%;
      height: 100px;
      background-color: rgb(25, 39, 161);
    }

  }
}

* css {
    width : 100%;
    float: left
  .right:{
    margin-left: 200px
  }
  .left{
    float: left;
    margin-left: -100%;
  }
}

// child 为浮动元素，高度『坍塌』

    .root{
      border:5px solid blue;
      width: 300px;
      overflow: hidden;

    }

    .child{
      border: 5px solid red;
      width: 100px;
      height: 100px;
      float: left;
    }

// 触发 box 在垂直方向上的间距由 margin 属性决定，但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象

.wrapper{
  overflow: hidden;
}