还是那句话，学了过不了多久就忘了，所以本人仅仅只是当个笔记的作用，没有什么高深的见解，勿喷！
这次该给css3中的弹性盒模型做做笔记了
插入一段代码
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test-self</title> <style> .box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box;} .box div{width:100px;height:100px;background:red;border:1px solid #000;} </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>
如上所示，给父元素加display:box或diaplay:inline-box即可用弹性盒模型，上述代码最终效果就像给子元素设置了float:left;属性一样；
Box-orient 定义盒模型的布局方向 Horizontal 水平显示 vertical 垂直方向 ，这条属性可以设置子元素是水平或者垂直排列、
box-direction 元素排列顺序 Normal 正序 Reverse 反序，这条属性是规定子元素的排列顺序。当然，我们会用
box-ordinal-group 设置元素的具体位置 这个属性来设置每个子元素更具体的位置，如
.box div:nth-of-type(1){-webkit-box-ordinal-group:2;}
.box div:nth-of-type(2){-webkit-box-ordinal-group:4;}
.box div:nth-of-type(3){-webkit-box-ordinal-group:1;}
.box div:nth-of-type(4){-webkit-box-ordinal-group:5;}
.box div:nth-of-type(5){-webkit-box-ordinal-group:3;}
下面讲讲盒模型中盒子的弹性空间Box-flex
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{height:100px;border:10px solid #000;padding:10px; display:-webkit-box; font-size:20px;color:#fff; }
.box div{height:100px;background:red;border:1px solid #fff;}
.box div:nth-of-type(1){width:300px;}
.box div:nth-of-type(2){-webkit-box-flex:2;}
.box div:nth-of-type(3){-webkit-box-flex:3;}
.box div:nth-of-type(4){-webkit-box-flex:4;}
.box div:nth-of-type(5){-webkit-box-flex:5;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
如上所示，最终的效果就是第一个div占300px，后面根据比例占不同的分数，第二个盒子占剩余空间的2/14.
也就是说子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 。
最后 ，来讲讲一个非常有用的东西。box-pax 对盒子的富裕空间的管理。
Start 所有子元素在盒子左侧显示，富裕空间在右侧 End 所有子元素在盒子右侧显示，富裕空间在左侧 Center 所有子元素居中 Justify 富余空间在子元素之间平均分布
通过这些属性的设置，可以很方便的完成一些菜单之类的布局，个人感觉比float好用多了
在垂直方向上：
box-align 在垂直方向上对元素的位置进行管理 Star 所有子元素在据顶 End 所有子元素在据底 Center 所有子元素居中
浙公网安备 33010602011771号