css3布局样式

布局相关样式

多栏布局

通过column-count指定，将一个元素中的内容分为多栏进行显示。
不过需要将元素的宽度设置成多个栏目的总宽度，也可使用column-width指定每个栏目的宽度。

div#div1{        width:40em;    -moz-column-count: 2;                -webkit-column-count: 2;}div#div3{        width:100%;        background-color:yellow;        height:200px;}//使用column-widthdiv#div1{           -moz-column-count: 2;                -webkit-column-count: 2;        -moz-column-width:20em;        -webkit-column-width:20em;}

可以使用column-gap属性来设定多栏之间的间隔距离。
使用column-rule在栏与栏之间增加一条间隔线。

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;}

盒布局

在css三中，使用box属性来使用盒布局。可以解决使用float属性底部不对齐的缺点。

#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;}

盒布局与多栏布局的区别：

多栏布局宽度各栏宽度是相等的。在指定栏宽度时也只能指定一个统一的宽度。与不可能具体指定每一栏中显示什么内容。

弹性盒布局

使用自适应窗口的弹性盒布局：加上box-flex属性。

#contents{        -moz-box-flex:1;        -webkit-box-flex:1;    padding: 20px;    background-color: yellow;}

box-ordinal-group:该属性用一个整数决定浏览器在显示的时候根据序号从小到大显示这些元素。
box-orient:用vertical改变元素从水平方向显示到垂直方向显示。也可用horizontal

#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;}

使用盒布局时元素的高度与宽度具有一定的自适应，可使用弹性盒布局消除空白。

可对多个元素使用box-flex属性，box-flex属性值也可使用大于1。原理是讲原来页面的空余部分划分为总的box-flex份进行分配。

指定水平方向与垂直方向的对齐方式

使用盒布局的时候，可以使用box-pack及box-align属性来指定元素中文字，图像及子元素水平方向或垂直方向的对齐方式。表如下：

让文字居中显示，代码示例：

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;}