CSS3盒子模型(Flexible Box Module)之尺寸应用详解

2010-05-22 16:56:25 作者：不详来源：Bolo的博客

空间的分配

因为我们可以把具有固定尺寸和灵活尺寸的子容器混合使用，并且也可以给父容器赋予灵活的尺寸。因此在最终的成品里我们可能会遇到父容器空间过余或者不足的情况。为了更合理地利用父容器提供的空间，box-align 和 box-pack 属性可以帮助我们。

1. box-pack 属性

box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：

start ：所有子容器都分布在父容器的左侧，右侧留空
end ：所有子容器都分布在父容器的右侧，左侧留空
justify ：所有子容器平均分布（默认值）
center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）

2. box-align 属性

box-align 属性用于管理子容器在竖轴上的空间分配方式，共有五个值：start，end，center，baseline 和 stretch。

start ：子容器从父容器顶部开始排列
end ：子容器从父容器底部开始排列
center ：子容器横向居中（有点奇怪）
baseline ：所有子容器沿同一基线排列（很难理解）
stretch ：所有子容器和父容器保持同一高度（默认值）

box-align 和 box-pack 属性通常混合使用，我们可以用下面的 CSS 测试一下：

#exemple6 .content{
 -moz-box-orient: horizontal;
 -moz-box-pack: center;
 -moz-box-align: center;
 
 -webkit-box-orient: horizontal;
 -webkit-box-pack: center;
 -webkit-box-align: center;
 
 box-orient: horizontal;
 box-pack: center;
 box-align: center;
}

运行下面的代码，大家可以用Firebug 禁用box-align和box-pack属性看看它们的区别和效果。

<!doctype html="">
	<html lang="en">
		<head>
			<meta charset="utf-8" />
			<title></title>
			<style type="text/css">
/* -------------------------------------- *
* Global style to make the page "pretty" *
* -------------------------------------- */
html, body{
padding : 0;
margin : 0;
height : 100%;
width : 100%
}
body{
padding : 0;
margin : 0;
font : 0.9em Arial, Helvetica, sans-serif;
background : #000
}
.block{
background : #FFF;
width : 400px;
height : 150px;
margin : 0 auto 2em;
}
.content{
width : 400px;
height : 150px;
}
a{
color : #CCF;
}
h1{
font-size : 1.4em;
color : #FFF;
border-bottom : 1px solid #FFF;
width : 400px;
margin : 1em auto;
text-align : center;
padding-bottom : 0.6em;
}
p{
font : 12px Verdana, Arial, Helvetica, sans-serif;
color : #FFF;
border-top : 1px solid #FFF;
width : 400px;
margin : 1em auto;
text-align : center;
padding-top : 0.6em;
}
h2{
font : 14px Verdana, Arial, Helvetica, sans-serif;
background : #CCC;
margin : 2em auto 0;
padding : 8px;
width : 384px;
-moz-border-radius : 5px 5px 0 0;
-webkit-border-radius : 5px 5px 0 0;
border-radius : 5px 5px 0 0;
}
.boite strong{
display : block;
padding : 10px;
}
.v1{
background : #FCC;
}
.v2{
background : #CFC;
}
.v3{
background : #CCF;
}
/* -------------------------------- *
* The flexible box model in action *
* -------------------------------- */
.content{
display : -moz-box;
display : -webkit-box;
display : box;
}
/*************
* EXAMPLE 4 *
*************/
#exemple4 .content{
-moz-box-orient : horizontal;
-webkit-box-orient : horizontal;
box-orient : horizontal;
}
#exemple4 .v1{
-moz-box-flex : 2;
-webkit-box-flex : 2;
box-flex : 2;
}
#exemple4 .v2{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
#exemple4 .v3{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
/*************
* EXAMPLE 5 *
*************/
#exemple5 .content{
-moz-box-orient : horizontal;
-webkit-box-orient : horizontal;
box-orient : horizontal;
}
#exemple5 .v1{
-moz-box-flex : 2;
-webkit-box-flex : 2;
box-flex : 2;
}
#exemple5 .v2{
-moz-box-flex : 1;
-webkit-box-flex : 1;
box-flex : 1;
}
#exemple5 .v3{
width : 160px;
}
/*************
* EXAMPLE 6 *
*************/
#exemple6 .content{
-moz-box-orient : horizontal;
-moz-box-pack : center;
-moz-box-align : center;
-webkit-box-orient : horizontal;
-webkit-box-pack : center;
-webkit-box-align : center;
box-orient : horizontal;
box-pack : center;
box-align : center;
}			</style>
		</head>
		<body>
			<h1>
				CSS3 盒子模型案例</h1>
			<h2>
				4 - 盒子宽度按比例调节</h2>
			<div class="block" id="exemple4">
				<div class="content">
					<div class="boite v1">
						<strong>1</strong></div>
					<div class="boite v2">
						<strong>2</strong></div>
					<div class="boite v3">
						<strong>3</strong></div>
				</div>
			</div>
			<h2>
				5 - 第三个盒子宽度固定为 160px</h2>
			<div class="block" id="exemple5">
				<div class="content">
					<div class="boite v1">
						<strong>1</strong></div>
					<div class="boite v2">
						<strong>2</strong></div>
					<div class="boite v3">
						<strong>3</strong></div>
				</div>
			</div>
			<h2>
				6 - 盒子绝对居中</h2>
			<div class="block" id="exemple6">
				<div class="content">
					<div class="boite v1">
						<strong>1</strong></div>
					<div class="boite v2">
						<strong>2</strong></div>
					<div class="boite v3">
						<strong>3</strong></div>
				</div>
			</div>
		</body>
	</html>
	</!doctype>

提示:可以对代码修改后再运行。

防止子容器溢出

CSS3 并没有更好地解决内容溢出的问题，反而在加入和新的盒子模型参数后，溢出的情况变得更加频繁。因此最好的方法还是多做试验，更好地管理你的内容。overflow: hidden 正能临时起点作用而已。

相关热词：CSS3 盒子模型 CSS布局

分享到：

更多...

收藏至我的帐号

教程排行榜: 21个令人惊叹的CSS技术（案例）展示; 看这些用CSS3绘制的图标，你震撼了吗; HTML5的Video标签详细说明手册; 如何使一个DIV层居中于浏览器中？; 加一段代码让IE6支持hover伪类效果; IE PNG Fix—让IE6完美支持PNG透明图片的插件; CSS Sprite(CSS精灵)的优点和使用方法; 最新的IE6、IE7和IE8的CSS BUG汇总列表; 深入理解CSS的inherit与auto之间区别; 用浮动清除LI元素在IE6中底部3像素的BUG; CSS3教程：17种用CSS实现的很酷炫的立体网...; 解决IE6下PNG图片透明的最佳方法; IE的几个最常见BUG及解决方案; DIV+CSS布局两列右列宽度自适应布局的不同...; CSS样式的postion属性absolute和fixed的区别; CSS教程：用相对定位实现简单的图片边框阴...

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 能沿多个方向滑动切换的jquery幻灯代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...