css盒模型

CSS盒模型

基本概念：标准模型 + IE模型 ==》标准模型和IE模型的区别 ==》CSS如何设置这两种模型 ==》JS如何设置获取盒模型对应的宽和高 ==》根据盒模型解释边距重叠 ==》BFC（边距重叠解决方案）

CSS盒模型：

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

标准模型和IE模型

区别就是标准模型的宽度只有content的宽，而IE模型的宽度则包含boder + padding + content三个部分

CSS如何设置这两种模型

标准：box-sizing: content-box 浏览器默认
IE：box-sizing: border-box

JS如何设置获取盒模型对应的宽和高

设置
1、通过 dom.style.width/height 设置
2、内联 style 设置
3、通过link引入外部样式表
获取
1、通过 dom.style.width/height 获取，这种方法只能获取内联样式的宽和高
2、dom.currentStyle.width/height，这种方法获取到的事浏览器渲染之后的宽和高，这种毕竟准确，但缺点是只有IE支持。
3、window.getComputedStyle(dom).width/height，这种兼容火狐和谷歌，兼容性更好一些。
4、dom.getBoundingClientRect().width/height，getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。

根据盒模型解释边距重叠

代码内子元素和父元素的高度都是100px，通过给父元素设置 overflow: hidden; 使section的高度变成了子元素的高+外边距 120px；
为什么加一个overflow: hidden;就变得不一样了？其实就是给section元素创建了BFC

<section>
    <style>
      html *{
        padding: 0;
        margin: 0;
      }
      section {
        background-color: red;
        overflow: hidden; // 重点
      }
      .box {
        background-color: yellow;
        width: 100%;
        margin-top: 20px;
        height: 100px;
      }
    </style>
    <div class="box"> </div>
  </section>

BFC（边距重叠解决方案）

BFC的基本概念：块级格式化上下文
BFC的原理：1、在BFC这个元素的垂直方向的边距会发生重叠 2、BFC的区域不会与浮动元素的box重叠 3、BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，反过来也是 4、计算边非高度的时候，浮动元素也会参与计算

如何创建BFC

1、overflow 值不为 visible 的块元素
2、浮动元素（元素的 float 不是 none）
3、绝对定位元素（元素的 position 为 absolute 或 fixed）
4、行内块元素（元素的 display 为 inline-block）
5、表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
6、弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
块格式化上下文包含创建它的元素内部的所有内容.

BFC使用场景

去除边距重叠现象
清除浮动（让父元素的高度包含子浮动元素）
避免某元素被浮动元素覆盖
避免多列布局由于宽度计算四舍五入而自动换行