flex弹性模型

flex模型是w3c最新提出的一种盒子模型，很好的解决了普通模型的一些弊端。

一、比较两种盒子模型：

demo： 给div添加边框，观察他们的区别

<body>
    <div class="container"></div>
</body>

①普通模型css：

* {
    box-sizing: content-box;   
}
.container {
    margin: 30px;
     300px;
    height: 300px;
    background-color: red;
    border:20px solid aqua;
}

②flex弹性模型css：

* {
    box-sizing: border-box;   
}
.container {
    display: flex;
    margin: 30px;
     300px;
    height: 300px;
    background-color: red;
    border:20px solid aqua;
}

运行后DIV分别的样式：

普通模型 flex弹性模型

区别：两种盒子类型下设置了border后div的实际大小（粉色区域）存在区别，即：

普通盒子模型：总宽度 = margin+border+width；

flex弹性盒子模型：总宽度 = width；

持续更新中……