一、盒模型定义

        所谓盒模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。如下图所示：

盒模型示意图

二、盒模型的种类

    2.1 W3C定义的标准盒模型：

W3C标准盒模型

        从上图可以看出，w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分，即你width和height表示的是你具体内容的宽度和高度。

 2.2 IE盒模型：

IE盒模型

        IE盒子模型的范围同样也包括margin、border、padding、content，但和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border，这就是两者的区别所在。

    2.3 CSS3 盒模型：

           主要是解决W3C标准盒模型中宽度被撑开的问题，因为在标准盒模型中，大小会被我们之后布局时设置的border或padding所影响，这时候为了保证盒模型大小不变，我们又不得不将width或者height进行加减计算。而在CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们就不用再去做加减运算了，这里主要分为一下两种。

        ① box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

        ② box-sizing: border-box  盒子大小为 width    就是说  padding 和 border 是包含到width里面的（不用再去进行加减计算了）

    2.4 CSS3 弹性盒模型：

        CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。其目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间，这是我以前写过的弹性模型代码，偷懒直接贴图了：

弹性模型的使用

        首先我们需要在父级元素中添加display: flex属性，将其设置为弹性模型(此时没有设置方向，即为主轴水平方向)。然后给子元素分大小，这里我依次设置为2 、1、3，也就是说将父亲的宽度width分成了6份，其中三个孩子分别占2/6，1/6，3/6。需要注意的是我还给第二个孩子设置了水平方向的外边距margin值，看看是否会有盒子撑开的情况：

flex盒模型布局

        事实是flex模型会先将父亲的width-我设置的margin再分成6份最后分配给子元素，所以布局还是很方便的。此外我们还可以设置flex的一些其他属性，这里先介绍两个比较常用的：

        ① flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

                min-width  最小值      min-width: 280px  最小宽度  不能小于 280

                max-width: 1280px  最大宽度  不能大于 1280

        ② flex-direction调整主轴方向（默认为水平方向）

                flex-direction: column 垂直排列

                flex-direction: row  水平排列