CSS-盒模型知识整理与理解：

CSS盒模型知识整理与理解 --- 盒模型的基本概念

本文涉及知识：

盒模型的概念
标准模型和IE盒模型的区别
JS获取盒模型宽高的方法
盒模型的边距重叠问题
BFC的理解（概念、原理、如何创建、使用场景）

CSS盒模型的概念

CSS盒模型(box model),它是包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。

而盒模型又分为两类标准：标准盒子模型和IE盒子模型（怪异盒子模型）

标准盒模型

CSS3中加入了新的属性box-sizing，可以通过设置box-sizing属性来改变盒模型标准

在浏览器默认的盒模型是content-box

box-sizing: content-box(默认);

IE盒模型

IE盒子模型，也称为怪异盒子模型

可以通过box-sizing来设置此标准

box-sizing: border-box;

标准盒子模型和IE盒子模型的区别

从上面的盒子模型的图片展示，可以清晰的看到

在标准盒子模型中，盒子的width是指content的宽高，

而IE盒子模型中就比较怪异了，它包含了content、border和padding的距离。

即它们的主要区别在于width和height的计算方式的不同。

标准盒子模型：盒子的总宽度 = margin+border+padding+width

width = content的宽度

IE 盒子模型 : 盒子的总宽度 = margin+width

width = content的宽度+border边框宽度(左右)+padding内边距(左右)

高度计算同理

区别例子展示

我们设置了两个盒子,设置了它们的width、height都为200px

  <style>
    html *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 200px;
      height: 200px;
      border: 10px solid #000;
      padding: 10px;
    }
    #ie-box{
      box-sizing: border-box;
    }
  </style>

  <div id="w3c-box">
    content
  </div>
  <div id="ie-box">
    content
  </div>

标准盒子模型：打开控制台，可以看见标准盒模型的width为content内容的宽度200px（高度同理）

IE盒子模型：打开控制台，可以看到我们设置了width是200px，此处设置的已经不再是content内容区了，

而设置的width = content的宽度+ padding左右宽度+border左右宽度

JS获取宽高的方法

方法1：dom.style.width/height

此方法只可以取到行内样式，而取不到内部样式表或者外部样式表设置的width

例如一下例子，可以取到w3cbox设置的width
<div id="w3c-box" style="width:300px">
    content
 </div>
<script>
    var w3c = document.getElementById('w3c-box');
    var ie = document.getElementById('ie-box');
    // 方法1： dom.style.width/height
    console.log(w3c.style.width);
</script>
而如果我们用内部样式表或者外部样式表
<style>
    #w3c-box{ width: 300px };
</style>
<div id="w3c-box">
    content
 </div>
<script>
    var w3c = document.getElementById('w3c-box');
    var ie = document.getElementById('ie-box');
    // 方法1： dom.style.width/height
    console.log('width:'+ w3c.style.width);
</script>
我们无法获取到width的值。

那么我们有什么办法可以获取到样式表中的width和height呢？

方法2: dom.currentStyle.width/height

但是此方法仅仅兼容IE，其他浏览器都不可以使用该属性，微软旗下的Microsoft Edge浏览器同样不兼容

例子展示
<style>
#w3c-box{
      width:300px;
}
<style>

<div id="w3c-box">
    content
</div>

<script>
var w3c = document.getElementById('w3c-box');
var ie = document.getElementById('ie-box');
// 方法2： dom.currentStyle['width/height']
 console.log(w3c.currentStyle['width']);
</script>
在IE浏览器中

而在其他浏览器，currentStyle这个对象为undefined

方法3：window.getComputedStyle(dom).width/height

getComputedStyle()用于获取CSS计算后的属性值

获取
console.log('w3c_width='+window.getComindoputedStyle(w3c).width);
此方法兼容IE9+以及其他浏览器，拥有者良好的及兼容性，普遍通用的方法。

方法4：dom.getBoundingClientRect().width/height

getBoundingClientRect()

获取元素相对于视窗的位置的集合

返回值有 top、left、width、height

兼容性更好，可以兼容IE5、firefox2以上的浏览器

但是在获取标准盒模型的宽高的时候会加上border和padding的宽度，例如怪异盒模型

CSS-盒模型知识整理与理解