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> <div id="box"><img src="images/china.gif" /></div> </div> </body>
CSS3代码：
CSS Code复制内容到剪贴板
<style type="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:#04082b url(images/map1.jpg) no-repeat top center; } #box{ border:1px solid red; padding:4px; } </style>
演示效果：
关于布局空间管理的进一步分析 分析布局空间管理的各种情况。 基本代码：
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
