css3-盒模型

ie6 混杂盒模型

一般盒模型：
boxWidth = width + 2*border + 2*padding;

ie6 混杂盒模型
boxWidth = width;
contentWidth = width - 2*border - 2*padding;
开启混杂模式：

box-sizing:border-box;

resize

resize:both | horizontal | vertical;

使用resize时，必须设置overflow属性
resize属性可以让盒子具有类似textarea可以被拉伸的特性。

flex弹性盒子

align-content交叉轴的对其方式，属性值和功能均与justify-content相似。
align-content仅对多行元素生效。
子项设置的flex属性：
order
order属性的默认值是0，是类似于z-index属性的排列顺序方面的层级。

div:first-of-type{
	ordere:-1;
}
div:nth-of-type(2){
	order: -2;
}

align-self

align-self属性设置的样式优先级要高于align-items属性设置的样式，同时在多行元素的情况下低于align-content的属性设置的样式。
flex-grow
默认值为0
当主轴方向还有剩余空间时，flex-grow会根据自己的比例让盒子伸张到一定的程度来瓜分剩余的空间。
** flex-basis**
可以改变子项的宽度，当子项设置flex-basis属性时，子项如果设置宽度则宽度无效。默认值为auto与 width属性的值看齐。
当flex-grow与flex-basis一起使用时。flex-grow会将flex-basis的值当作剩余空间来伸张。
如果容器设置了width，没有设置flex-basis，并且有文字将要溢出容器，则容器宽度不变，文字溢出。
设置flex-basis，如果文字将要溢出容器会撑开容器。
如果没有设置wdith或者flex-basis大于width，则flex-basis设置的是容器的最小宽度。
如果设置了width，并且flex-basis < realWidth < width则设置的是最小宽度为flex-basis最大宽度为width。

flex-shrink
主轴方向的收缩。
默认值：1.
如果子元素的宽度都相同，则与flex-grow的规则一致。
主轴方向上被不换行文字撑开的容器不参与收缩。
如果不同：

/*父容器*/
.wrapper{
	width: 600px;
}
/*  假设有3个子元素 */
.content{
	flex-shrink:1;
	width: 200px;
	height: 200px;
}

.content:nth-of-type(3){
	width: 400px;
	flex-shrink: 3;
}

已知父容器的宽度为600px，子元素的总宽度为800px，超出父容器200px。
伸缩比例的计算方式：
加权值：200（子元素的内容宽度contentWidth） * 1 + 200 * 1 + 400 * 3 = 1600；
第一个子元素与第二个子元素缩小的值 ：200px * 1 /1600 * 200px = 25px；
第三个子元素缩小的值： 400 * 3/ 1600 * 200px = 150px；
所以第一个子元素与第二个子元素的宽度为 200 - 25 = 175px；
第三个子元素的宽度为 ：400 - 150 = 250px；