CSS盒模型,怪异盒模型

先不考虑css3的情况，盒模型一共有两种模式，一种是标准模式，另一种就是怪异模式。
首先定义一个div块用来演示标准模式和怪异模式的区别，以下是Css样式:

.box {
    width: 200px;
    height: 200px;
    border: 20px solid black;
    padding: 50px;
    margin: 50px;
}

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

看到这里你应该对盒模型的两种模式有了清晰的认识，下面在此基础上介绍一下css3属性box-sizing;

box-sizing语法：

box-sizing ： content-box || border-box || inherit;

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；

当设置为box-sizing:border-box时，将采用怪异模式解析计算。