在HTML中，任何元素都可以看做一个盒子
这个“盒子”的作用就是用来包裹页面中的内容，比如图片、文字等等
在W3C的规定下，盒子模型（标准盒子模型）从内到外的基本组成为
margin
border
padding
content
如图所示，
图片来源见水印
在W3C下，在任一方向添加margin，border，padding都会使元素整体占用的空间变大
除此之外，通过一些设置，可以将普通盒子模型变成变态盒子模型（非标准盒子模型）和弹性盒子模型
在标准盒子模型中，宽（width）高（height）的设置对内容区（content）有效
非标准盒子模型中，是对整个盒子所占空间的设置
变态盒子模型：
通过设置 style 样式 box-sizing: border-box;
添加完这个属性值以后，当前的盒子模型就不再是默认的盒子模型了，
而是变成一个非标准的盒子模型
弹性盒子：display 设置为 flex 的盒子模型
注意：弹性盒子基本上是添加给父元素，为的是其中的子元素可以按照弹性盒子的规则进行布局
如果子元素中还有孙子元素需要按照弹性盒子的规则进行布局，那么子元素也要添加display：flex
而如果父元素添加了display：flex，那么子元素中float、clear等属性会失效
弹性盒子css设置：
<style>
#container{
height: 300px;
border: 1px solid red;
display: flex;
/*
默认水平显示 row
如果改成垂直显示，垂直方向高度不够显示不开，等比例压缩
*/
flex-direction: row;
/*
水平方向的换行方式 默认nowrap
默认值如果显示不开，等比例压缩
*/
flex-wrap: wrap;
/*
子元素对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 等间距对齐
*/
justify-content: space-around;
/*
子元素垂直对齐方式：
注意：stretch要求项目没有高度设置
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
*/
align-items: center;
}
#inner1{
width: 28%;
height: 200px;
background-color: #7281A4;
/*order用来决定子元素的排列顺序*/
order: 2;
/*flex-grow 剩余空间的分配比例 默认为0不分配
值越大，分配比例越多*/
flex-grow: 1;
/*如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。*/
flex-shrink: 0;
}
#inner2{
width: 28%;
height: 200px;
background-color: #BF8160;
order: 1;
flex-grow: 1;
/*flex-basis定义元素的固定基础宽度
如果还有剩余空间，则所有元素均分剩余空间
如果空间不够，则等比例压缩其他元素
*/
flex-basis: 500px;
/*align-self属性允许单个项目有与其他项目不一样的对齐方式*/
align-self: center;
}
#inner3{
width: 20%;
height: 200px;
background-color: #95ffe9;
order: 3;
flex-grow: 1;
}
</style>
body布局：
<div id="container">
<div id="inner1"></div>
<div id="inner2"></div>
<div id="inner3"></div>
</div>