CSS3 of box

box
标准盒子：box-width=border2+padding2+width
IE6混杂模式盒模型：box-width=width 所以content-width=width-border2-padding2

box-sizing:border-box怪异模型/content-box标准盒模型（默认）
怪异模型的适用场景：宽度不固定，padding固定还有输入框之类

resize调节元素大小，必须要有overflow属性存在

display:flex/inline-flex 弹性盒子 下面属性以display:flex为基础
设置到父元素上的属性：
flex-direction:row（默认）/column/row-reverse/column-reverse 设置主轴方向

flex-wrap:nowrap(默认不换行)/wrap（换行）/wrap-reverse

justify-content:flex-start(默认)/flex-end/center/space-between(两边占住，中间均分)/space-around（元素之间空隙相等，两端保留空隙的一半，类似加左右两边的margin）基于主轴做对齐方式

align-items:strech(默认，子元素如果没设置高度就平铺容器高度，设置了就无效)/flex-start/flex-end/center/baseline(基于文字底线对齐) 基于交叉轴进行位置分配，主要针对单行元素来处理对齐方式

align-content 必须作用到多行上，属性值与justify-content一样

设置到子元素上的属性：
order 排列元素 数值越小排在越前面，默认值为0

align-self 属性值与align-items一样,父级设置align-items，align-self优先级高 但是父级如果设置了align-content,align-self失效 基于交叉轴的分配状况

flex:flex-grow flex-shrink flex-basis
*伸缩盒核心功能
伸：
flex-grow:0(默认值) 当主轴方向还有剩余空间时，会根据各自设置的比例瓜分剩余的空间形成新的宽度
缩：
flex-shrink:1（默认值） 自身宽度（只算内容区宽度）×shrink值/总权值(每个需要缩放元素的宽度×各自缩放量后的值相加) ×多余空间

flex-basis:auto(默认，和width相同) 同时设置flex-basis和width，width失效
flex-basis和width的联系：
没填width的时候设置flex-basis，就是元素的真实宽度的最小值，文字多可以将内容区撑开；
如果只填了width,文字多的话会超出width；
如果两个都填了并且width>flex-basis，width相当于宽度最大值,flex-basis相当于宽度最小值，
当flex-basis大于width，宽度变成flex-basis

注意：如果英文不换行，撑开容器的宽度不参与压缩，如果需要压缩就加属性word-break:break-work