盒模型

1.怪异盒模型

border-box(怪异盒模型)

box-sizing: border-box

为元素设定的宽度和高度决定了元素的边框盒。

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制

maring  padding border

2.标准盒模型  

content-box(默认)

box-sizing: border-box

maring  padding border

弹性盒模型

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  占据主轴上剩下的空间 并且会随着内容进行撑开