前端学习系列——（三）盒子模型

一、盒子模型的分类

    盒子模型如下图所示，其中分为两类，分别是W3C标准盒子模型和IE盒子模型。

二、两种盒子模型的区别   

 1）W3C标准盒子模型

        包括margin、border、padding、content，盒子的width=content（内容）的宽度，height=content的高度。

    2）IE盒子模型

        其他和W3C标准盒子模型差不多，只有盒子的width=content的宽度 + 2*padding（内边距）的宽度 + 2*border（边框）的宽度，高度同理。

三、两种盒子模型的转换

    相比于W3C标准盒子模型，IE盒子模型更符合现实生活中的盒子模样，盒子的大小包含border、padding、以及content。后来W3C也认识到了这个问题，于是在CSS3当中增加了一个样式box-sizing，包括content-box和border-box属性，用于实现盒子模型的相互转换。（下面的内容，只进行介绍盒子宽度的计算，高度的计算同理）

    1）content-box（W3C盒子）

    width = content的宽度，通过width设置或者获取的宽度，都是盒子的content的宽度，在设置width之后，会在盒子的内容以外绘制内边距和边框。例如为盒子设置以下样式后：

.cBox{
   box-sizing: content-box;
    width: 200px;
    padding: 10px;
    border: 10px solid #ff0000;
}

    2）border-box（IE盒子）

    盒子的width=content的宽度 + 2*padding的宽度 + 2*border的宽度。

    i.通过width设置了宽度，则决定了盒子的可视区宽度

    ii.之后设置的padding和border都是在已定宽度的盒子内绘制

    iii.内容的宽度=盒子的宽度-2*padding宽度-2*border的宽度

    按照下面样式设置元素：

.bBox{
    box-sizing: border-box;
    width: 200px;
    padding: 10px;
    border: 10px solid #ff0000;
}