CSS复习之标准盒模型与怪异盒模型

盒模型一般包含 content（内容）、padding（内边距）、border（边框）、margin（外边距）。

标准盒模型指的是W3C标准下的盒模型，而怪异盒模型指的是IE下的盒模型，也可以通过设置 box-sizing 属性来改变盒模型，border-box 为怪异盒模型，border-content 为标准盒模型。

差异如下：

 

 

标准盒模型下设置的高宽就是 content 高宽，也就是说设置 padding border margin 都会把盒子往外撑大。

.box{
    width: 200px;
    height: 200px;
    background: orange;
    margin: 10px;
    padding: 10px;
    border: 1px solid blueviolet;
}

而怪异盒模型下设置的高宽是 content + padding + border 的高宽，只有 margin 会把盒子往外撑大，而修改 padding 和 border 会压缩内容。

将上面的盒子转换为怪异盒模型：

.box{
    width: 200px;
    height: 200px;
    background: orange;
    margin: 10px;
    padding: 10px;
    border: 1px solid blueviolet;
    box-sizing: border-box; /* 转换为怪异盒模型 */
}