CSS两大盒模型的区别

CSS中Box model分为两种，第一种是W3C的标准盒模型，另一种是IE的盒模型。

1、content-box传统盒模型

content-box 是W3C的标准盒模型模型，范围包括 margin、border、padding、content,并且 content 部分不包含border和padding。

例如：首先设置一个宽和高都为100px的盒子

div {
            height: 100px;
            width: 100px;
            background-color: pink;
        }

现在给盒子加上一个10px的padding值：

div {
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
        }

由此可知，传统盒模型的padding会撑大盒子。
再给盒子设置一个5px的border：

div {
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
            border: 5px solid crimson;
        }

可见，传统盒模型的border也会撑大盒子
这种撑大盒子的特性会在实际开发中带给我们很多困难，例如我们已经利用浮动或定位排列好了许多模块，现在只需要各个模块的间距大一点，如果用传统盒模型的border或者padding，就会破坏我们之前设置好的布局。这就要用到下边的一种盒模型。

2、border-box盒模型

IE 盒子模型的 content 部分包含了border 和 padding，其内容真正的宽度是(width-padding-boder)；

css3中定义了box-sizing属性，可通过此属性来设置是W3C传统盒模型还是IE 盒模型

使用方法如下：

box-sizing: content-box（默认） || border-box;

例子还是上边的100*100的盒子，这次把盒子设置成border-box：

div {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            background-color: pink;
        }

然后再次给盒子设置10px的padding：

 div {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
        }

由此可见，设置padding盒子不会变大，会使内容区域变小。

再次设置5px的border：

 div {
            box-sizing: border-box;
            height: 100px;
            width: 100px;
            background-color: pink;
            padding: 10px;
            border: 5px solid crimson;
        }

可见，border也不会撑大盒子，也是往里使内容变小。这种盒子模型就很好的解决了布局中“撑大”盒子的问题。

总结

作为一个前端开发人员来说，“IE”两个字无疑是让人头大的（没错，就是它调不完的兼容性问题）。但是IE提出的border-box盒模型却给开发人员提供了极大的便利性。在实际开发过程中，border-box盒模型的使用比例会比传统的content-box高很多，所以要熟练掌握两种盒模型的使用技巧和特点。尤其是border-box。