今天小编跟大家讲解下有关CSS3弹性盒模型开发笔记（三） ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3弹性盒模型开发笔记（三） 的相关资料，希望小伙伴们看了有所帮助。
本文介绍了CSS3弹性盒模型，供大家参考，大家亦可以结合CSS3弹性盒模型开发笔记（一）、CSS3弹性盒模型开发笔记（二）进行学习，具体内容如下
box-pack和box-align属性
当弹性元素和非弹性元素混合排版时，有可能会出现所有子元素的尺寸大小或小于盒子的尺寸，从而出现盒子空间不足或者富余的情况，这时就需要一种方法来管理盒子的空间。如果子元素的总尺寸小于盒子的尺寸，则可以使用box-align和box-pack属性进行管理。
box-pack属性可以在水平方向上对盒子的富余空间进行管理，该属性的基本语法如下：
box-pack：start | end | center | justify
取值说明：
start：所有子元素都显示在盒子的左侧，富余的空间显示在盒子的右侧。
end：所有子元素都显示在盒子的右侧，富余的空间显示在盒子的左侧。
justify：富裕的空间在子元素之间平均分配。在第一个子元素之前和最后一个子元素之后不分配空间。
center：富余的空间在盒子的两侧平均分配。
box-align属性可以在垂直方向上对盒子的富余空间进行管理，该属性的基本语法如下：
box-align：start | end | center | baseline | stretch
取值说明：
start：所有子元素沿着盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子的底部。
end：所有子元素沿着盒子的下边缘排列，都显示在盒子的底部，富裕的空间显示在盒子的上部。
center：富余的空间在盒子的上下两侧平均分配，即上面一半，下面一半。
baseline：所有盒子沿着它们的基线排列，富余的空间可前可后显示。
stretch：每个子元素的高度被调整到适合盒子的高度显示。
实战体验：自适应布局居中设计
HTML代码：
XML/HTML Code复制内容到剪贴板 <body> <divid="box"><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </div> </body>CSS3代码：
CSS Code复制内容到剪贴板 <styletype="text/css"> body,html{ height:100%； width：100%； } body{ margin:0; padding:0; display:box; display:-moz-box; display:-webkit-box; box-orient:horizontal; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-pack:center; -moz-box-pack:center; -webkit-box-pack:center; box-align:center; -moz-box-align:center; -webkit-box-align:center; background:#04082burl(images/map1.jpg)no-repeattopcenter; } #box{ border:1pxsolidred; padding:4px; } </style>演示效果：
关于布局空间管理的进一步分析
分析布局空间管理的各种情况。
基本代码：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>box-pack、box-align</title> <styletype="text/css"> #box{ border:solid1pxred; width:600px; height:400px; display:-moz-box; display:-webkit-box; display:box; } #boxdiv{ margin:4px; border:solid1px#eee; } #boxdivimg{width:120px;} </style> </head> <body> <divid="box"> <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </div> </body> </html>演示效果：
子元素全部水平和垂直居中显示显示
CSS Code复制内容到剪贴板 #box{ box-pack:center; -moz-box-pack:center; -webkit-box-pack:center; box-align:center; -moz-box-align:center; -webkit-box-align:center; }演示效果：
子元素全部位于盒子的左下角，富余空间位于右上角
CSS Code复制内容到剪贴板 #box{ box-pack:start; -moz-box-pack:start; -webkit-box-pack:start; box-align:end; -moz-box-align:end; -webkit-box-align:end; }演示效果：
- 子元素水平平均分布，垂直伸展展示
CSS Code复制内容到剪贴板 #box{ box-pack:justify; -moz-box-pack:justify; -webkit-box-pack:justify; box-align:stretch; -moz-box-align:stretch; -webkit-box-align:stretch; }演示效果：
- 子元素水平平均分布，在垂直方向上按基线分布
CSS Code复制内容到剪贴板 #box{ box-pack:justify; -moz-box-pack:justify; -webkit-box-pack:justify; box-align:baselinebaseline; -moz-box-align:baselinebaseline; -webkit-box-align:baselinebaseline; font-size:28px； }演示效果：
- 子元素全部位于盒子的右侧并平均分布，并按垂直顺序进行分布
CSS Code复制内容到剪贴板 #box{ box-pack:justify; -moz-box-pack:justify; -webkit-box-pack:justify; box-align:end; -moz-box-align:end; -webkit-box-align:end; box-orient:vertical; -moz-box-orient:vertical; -webkit-box-orient:vertical; }演示效果：
空间溢出管理
上述“子元素全部位于盒子的右侧并平均分布，并按垂直顺序进行分布”可以看出，弹性布局中盒子内的元素很容易“跑出”盒子的“包围圈”。这种现象被称为空间已出。与传统的盒模型一样，CSS允许使用overflow属性来处理溢出内容的显示方式。当然，我们还可以使用box-lines属性避免空间已出问题（目前各大浏览器支持不太好）。该属性语法如下：
box-lines：single | multiple
取值说明：
single：所有子元素都单行或者单行显示。
multiple：所有子元素可以多行或多列显示。
实战体验：让子元素分行显示
HTML代码：
XML/HTML Code复制内容到剪贴板 <body> <divid="box"> <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif <div><imgsrc=http://xyrl.com/skin/7ke/image/nopic.gif </div> </body>CSS3代码：
CSS Code复制内容到剪贴板 <styletype="text/css"> #box{ border:solid1pxred; width:600px; height:400px; display:-moz-box; display:-webkit-box; display:box; } #box{ -moz-box-lines:multiple; -webkit-box-lines:multiple; box-lines:multiple; } #boxdiv{ margin:4px; border:solid1px#aaa; -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; } #boxdivimg{width:120px;} </style>演示效果：
以上就是本文的全部内容，希望对大家的学习有所帮助。
本文地址：http://blog.csdn.net/lovejulyer/article/details/51234774
来源：爱蒂网
