解释一下盒模型

[XiZev]

基本概念

在浏览器布局的时候，会把每一个HTML元素渲染成一个矩形的区域，盒模型就是对这个形状的一个抽象描述。

根据具体盒子的形状和组成，又可以对它由外到内进行细分：

标签内部的文本会在content内显示，可设置margin、padding的大小自由控制伸缩盒子。

就像我们买东西，收到的快递之后发现，本来就只有一部小小的手机（content），收到的却是那么大一个盒子。手机的包装盒和手机之间有间隔层（padding），手机盒子有厚度（border），手机盒子和快递箱之间还有一层泡沫板（margin）。这就是一个典型的盒子。

• 当margin、padding设置四个值的时候，依次分别为top、right、bottom、left，当哪条边缺失，就设置为对应边的值；
• margin设置为auto就由浏览器自适应计算外边距，可以用来自动居中；
• 在不考虑到BFC特性，margin 还有一个特点——纵向重叠：纵向两个元素的margin会发生叠加，取两者的最大值。

两种盒模型

根据设置box-sizing定义匹配某个区域的特定元素，分为标准W3C盒模型和IE盒模型，区别在于width 属性所包含的大小。

标准W3C盒模型 —— box-sizing：content-box

width = content

IE盒模型 —— box-sizing：border-box

width = 2 * border + 2 * padding + contentt

两者进行比较，把盒子设置为IE盒模型，不论内边距距，边框如何改变盒子的真实宽高都不会发生改变。

在自适应的网页中，容器里并排显示两个同样的盒子，宽度设置成50%，如何调整padding都会在两个盒子内部调整，不会影响页面布局。

[XiZev]

默认情况下，浏览器设置box-sizing：content-box

[XiZev]

预设情况下，设置全局css样式（optional）：

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
  }