多栏布局和盒布局

</div>Web页面中的布局，是指在页面中如何对标题、导航栏、主要内容、脚注、表单等各种构成要素进行一个合理的编排。

css3之前，主要使用display+float+position进行页面简单布局，但是它们也存在一些缺点，譬如两栏或者多栏中元素高度不一时，

可能导致底部很难对齐。因此，css3中引入了一些新的布局方式，使用这些布局除了可以修改之前布局遇到的问题之外，还可以进行

更为便捷、更为复杂的页面布局。

1.css3中引入了多栏布局，主要使用-*(浏览器前缀)-column-count来指定列数，但是每列宽度必须是一样的，不能单独指定；

  具体实现（两栏布局）:

html代码:

<div>

<p>左边</p>

<p>右边</p>

css代码：

div{

-webkit-column-count:2;

-moz-column-count:2;

-o-column-count:2;

}

2.盒布局主要是通过display：-*(浏览器前缀)-box，给最外层盒子添加box属性,可以指定每个指定宽度；

具体实现(三栏布局)：

html代码：

<div id="container">

<div class="left">左边</div>

<div class="content">中间</div>

<div class="right">右边</div>

</div>

css代码：

#container{

display:-webkit-box;

display:-moz-box;

display:-o-box;

}

#container .left{

width:300px;

background-color:red;

}

#container .center{

width:400px;

background-color:red;

}

#container .right{

width:300px;

background-color:red;

}

.left,.center,.right{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

}

3.弹性盒布局：如果实现左右固定宽度，中间自适应布局使用弹性盒布局可以很方便：

根据以上盒布局案例，只需更改.center中width=>-*-box-flex:1就可以实现中间元素自适应；另外

      设置显示顺序：-*-box-ordinal-group：要显示的顺序；

                设置方向：父元素-*-box-orient：vertical（水平）/horizontal；

                对齐：-*-box-pack/box-align:start（左/顶）、center(中)、end(右/底) 等等