盒子模型(标准盒子和怪异盒子)

盒子模型

盒子模型(Box Model)：
盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

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

标准盒子模型和怪异盒子模型

在怪异盒子模型下，一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

在标准盒子模型下，一个块的总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)

<style>
    div{
        width:100px;
        height:100px;
        padding:20px;
        border:2px solid #000;
    }
</style>

在怪异盒子模型下：总宽度为100px;

在标准盒子模型下：总宽度为144px;

两种模式的转换（通过box-sizing）

box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式

当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算；