CSS3中新的布局方式主要是多栏布局与盒布局。
多栏布局
使用多栏布局可以将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐。
<style type="text/css">
div#div1{
width:40em;
-moz-column-count: 2;
-webkit-column-count: 2;
}
div#div3{
width:100%;
background-color:yellow;
height:200px;
}
</style>
<div id="div1">
<img src="test.jpg" />
<p>示例文字1。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。
相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。
相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
<p>示例文字2。相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。
相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。
相对来说比较长的示例文字。示例文字。相对来说比较长的示例文字。示例文字。</p>
</div>
<div id="div3">
页面中其他内容
</div>
效果如图：
在CSS3中，通过
column-count属性来使用多栏布局方式，该属性的含义是将一个元素中的内容分为多栏进行显示。使用多栏布局的时候，需要将元素的宽度设置成多个栏目的总宽度。我们也可以使用
column-width属性单独设置每一栏的宽度而不设定元素的宽度。
div#divl{
-moz-column-count:2;
-webkit-column-count:2;
-moz-column-width:20em;
-webkit-column-width:20em;
}
column-gap属性用来设定多栏之间的间隔距离。
div#div1{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width:20em;
-webkit-column-width:20em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
}
可以使用column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、颜色等，该属性的属性值的指定方法与border属性的属性值指定方法相同。
div#div1{
-moz-column-count: 2;
-webkit-column-count: 2;
-moz-column-width:20em;
-webkit-column-width:20em;
-moz-column-gap:2em;
-webkit-column-gap:2em;
-moz-column-rule: 1px solid red;
-webkit-column-rule: 1px solid red;
}
盒布局
盒布局的基础知识
在CSS3中，通过box属性来使用盒布局。
<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
}
#left-sidebar{
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏</h2>
<ul>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
</ul>
</div>
<div id="contents">
<h2>内容</h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字。</p>
</div>
<div id="right-sidebar">
<h2>右侧边栏</h2>
<ul>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
</ul>
</div>
</div>
效果如图：
盒布局
盒布局与多栏布局的区别
盒布局与多栏布局的区别在于：使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定一个统一的宽度，栏与栏之间的宽度不可能是不一样的。另外，使用多栏布局时，也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时。
弹性盒布局
改变元素的显示顺序
使用弹性盒布局的时候，可以通过box-ordinal-group属性来改变各元素的显示顺序。可以在每个元素的样式中加入box-ordinal-group属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。
#container{
display: -moz-box;
display: -webkit-box;
}
#left-sidebar{
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-flex:1;
-webkit-box-flex:1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
效果如图：
改变元素的显示顺序
改变元素的排列方向
在CSS3中，使用box-orient来指定多个元素的排列方向。
#container{
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
}
#left-sidebar{
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents{
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-moz-box-flex:1;
-webkit-box-flex:1;
padding: 20px;
background-color: yellow;
}
#right-sidebar{
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
效果如图：
改变元素的排列方向
元素宽度与高度的自适应
使用盒布局的时候，元素的宽度与高度具有自适应性，即元素的宽度与高度可以根据排列方向的改变而改变。
<style type="text/css">
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
</style>
<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>
效果如图：
水平方向排列
修改上面代码，改成垂直方向排列。
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
效果如图：
垂直方向排列
使用弹性盒布局来消除空白
虽然使用盒布局的时候， 元素的高度与宽度具有一定程度的适应性，但是容器中总还是会留出一大片空白的区域。
修改样式代码：
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: horizontal;
-webkit-box-orient:horizontal;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
效果如图：
如果使用弹性盒布局的话，使用了box-flex属性的元素的宽度与高度总会自动扩大，使得参与排列的元素的总宽度与总高度始终等于容器元素的高度与宽度。
对多个元素使用box-flex属性
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
#text-a{
background-color: orange;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
效果如图：
对前两个div元素使用box-flex属性
从运行结果中我们可以看出，前两个div元素的高度都自动扩大了，而且扩大后前两个div元素的高度保持相等，而第三个div元素的高度仍保持为元素内容的高度。如果三个div元素的样式中都使用box-flex属性，则每个div元素的高度就等于容器的高度除以3了。
box-flex属性代表了什么含义?
修改容器高度为200px，在每个div子元素的样式代码中均使用box-flex属性，但是将第一个div元素的box-flex属性设定为2，其他两个div子元素的box-flex属性仍保留为1，元素排列方向为垂直排列。
#container{
display: -moz-box;
display: -webkit-box;
border: solid 5px blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 200px;
}
#text-a{
background-color: orange;
-moz-box-flex: 2;
-webkit-box-flex: 2;
}
#text-b{
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c{
background-color: limegreen;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-a, #text-b, #text-c{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1.5em;
font-weight: bold;
}
效果如图：
从图我们可以看出，第一个div子元素的高度并不等于其他两个div子元素的两倍。box-flex属性的属性值的正确含义如图：
指定水平方向与垂直方向的对齐方式
使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。
可以为box-pack属性及box-align属性指定的属性值和各种属性值的含义：
在使用CSS1或CSS2的时候，在
div元素内部直接放置文字的场合下，如果想让文字水平居中，只要使用text-align属性就可以了，但是若要让文字垂直居中，由于div元素是不能使用vertical-align属性的，所以也就很难做到了。在CSS3中，只要让div元素使用box-align属性(排列方向默认为horizontal) ，文字就可以垂直居中了。
<style type="text/css">
div{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
width:300px;
height:200px;
background-color:pink;
}
</style>
<div>示例文字</div>
效果如图：
让图像位于元素正中央：
<style type="text/css">
html, body{
width:100%;
height:100%;
margin:0;
padding: 0;
}
body{
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
}
</style>
<img src="tyl.jpg" />
