html三大盒子模型梳理

标准盒（W3C）

html所有元素默认是标准盒。会被内间距和边框撑大。

宽度计算规则：设置的宽度+内间距+边框+外间距

怪异盒（IE盒）

怪异盒子，不会被内间距，边框撑大。盒子内的内容也只会在减掉内间距+边框的剩余空间绘制。

转化为怪异盒： box-sizing:border-box

宽度计算规则：设置的宽度+外间距

弹性盒（flex）

弹性盒子是 CSS3 的一种新的布局模式。ie不支持。

当页面需要适应不同的屏幕大小，可以确保子元素拥有恰当的排列布局。

父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

转换为弹性盒子：display：flex

可选后续属性： flex-direction：设置主轴的方向 flex-wrap：设置子元素是否换行 flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap justify-content：设置主轴上的子元素排列方式 align-items：设置侧轴上的子元素的排列方式（单行） align-content：设置侧轴上的子元素的排列方式（多行）