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；持续更新中……