css盒模型

HTML

<div class="box">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>

CSS

/*
1.注意在使用弹性盒模型的时候，父元素必须要加display:box或display:inline-box
2.box-orient定义盒模型的布局方向
	horizontal水平显示 默认值
	vertical 垂直显示
3.box-direction元素排列顺序
	normal正序
	reverse反序
4.box-ordinal-group设置元素的具体位置
5.box-flex定义盒子的弹性空间（应用两侧宽度固定中间不固定....）
	子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和
6.box-pack对盒子富裕的空间进行管理
	star所有子元素的盒子左侧显示，富裕空间在右侧
	end所有子元素在盒子右侧显示，富裕空间在左侧
	center所有子元素居中
	justify富裕空间在子元素之间平均分配
	
7.box-align在垂直方向上对元素的位置进行管理（未知宽高的块级元素水平垂直居中）
	star所有子元素在据顶
	end所有子元素在据底
	center所有子元素居中
	
8.盒子阴影
box-shadow:[inset] x y blur [spread] color
	参数
	inset:投影方式
		inset:内投影
		不给：外投影
	x、y:阴影偏移
	blur:模糊半径
	spread:扩展阴影半径
		先扩展原有形状，再开始模糊
	color
	
9.box-reflect倒影
	box-reflect：方向  距离 渐变；
	direction方向 above|below|left|right
	距离
	渐变（可选）
10.resize自由缩放
	both水平垂直都可以缩放
	horizontal只有水平方向可以缩放
	vertical只有垂直方向可以缩放
	注意：一定要配合overflow:auto一块使用只有水平方向可以缩放

11.box-sizing盒子模型解析模式
	(1)content-box标准盒模型
		width/height=border+padding+content
	(2)border-box怪异盒模型
		width/height=content
  */
.box{
	height: 200px;
	border: 5px solid #000;
	display: -webkit-box;
	display: -moz-box;
}
.box div{
	height: 100px;
	width: 100px;
	background: red;
	border: 1px solid #fff ;
}