弹性盒

1、盒模型（box-sizing）： 标准盒模型（content-box）——

                                             a、padding和border  计算方式：自身content+padding+border

                                                                                                  实际content+padding+border+margin

                                            怪异盒模型（border-box）——

                                            b、padding和border在盒子内部  计算方式：自身content（padding和border）

                                                                                                                   实际大小：content+margin

2、弹性盒：概念display：flex——默认的主轴是X轴（主轴和侧轴是对应关系）

                                          弹性盒环境下所有的标签都可以直接设置宽高大小

                                          居中方式：margin：auto

                                          切记：浮动不可用定位和盒模型可以正常使用

                                          加在父级元素上的属性——改变主轴的默认方向flex-direction：row\column

                                          主轴上的对齐方式justify-content：flex-start/flex-end/center/space-between/space-around/space-evenly

                                           侧轴对齐方式align-items：flex-start/flex-end/center

                                           换行属性flex-wrap：wrap

                                           行与行之间有间距align-content：flex-start/flex-end/center/space-between/space-around/space-evenly

                                           加在子级元素上的属性：侧轴上的对齐方式控制单个元素align-self

                                           排序优先级order：数字——越大优先级越高 越往后显示

                                           flex：1    占据主轴上剩下的空间 并且会随着内容进行撑开