盒布局和多栏布局

【摘自HTML5与CSS3权威指南】

使用float或position时，元素的内容高度不一致，则有底部很难对齐的问题

解决方法：盒布局或多栏布局

 

一．盒布局和多栏布局的区别：

1.使用多栏布局时，各栏宽度必须是相等的，在指定每栏宽度时，也只能为所有栏指定统一的宽度，栏与栏之间的宽度不可能是不一样的。

2.使用多栏布局时，不可能具体指定什么栏中显示什么内容，因此比较适合使用在文章内容的时候，不适合用在由各元素组成的网页结构。

 

二．多栏布局

概念：将一个元素中的内容分为两栏或多栏显示，并且确保各栏中内容的底部对齐。

Div#div1{

width:40em;

-moz-column-count:2;

-webkit-column-count:2;

}

与float、position的区别：使用这两个属性时，只需单独设定每个元素的宽度即可，而使用多栏布局时需要设定元素中多个栏目相加后的总的宽度

//使用column-width属性单独设置每一栏的宽度而不设定元素的宽度

Div#container{

Width:42em;

}

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:2px solid red;///在栏与栏之间的增加一条间隔线

}

 

 

三．盒布局（弹性布局）

概念，用法，能够水平方向和垂直方向的排列，将容器中元素的宽度和高度指定为容器的宽度和高宽，能够使用box-pack属性及box-align属性将子元素放置在父元素中央。

例：三栏的横排内容，先在最外层的div使用box属性

#container{

display:-moz-box;

display:-webkit-box;

}

#left{

width:200px;

padding:20px;

background-color:orange;

}

#center{

width:300px;

padding:20px;

background-color:yellow;

}

#right{

width:200px;

padding:20px;

background-color:limegreen;

}

#left, #center, #right{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

}

四．弹性盒布局

1.使用自适应窗口的弹性盒布局  box-flex（只对一个元素使用时，宽高会自动扩大）

2.使用 box-ordinal-group改变各元素的显示顺序

3.使用 box-orient指定多个元素的排列方向, vertical垂直, horizontal横向

#container{

display:-moz-box;

display:-webkit-box;

-moz-box-orient:vertical;///垂直方向排列

-webkit-box-orient:vertical;///垂直方向排列

}

#left{

/*width:200px;

padding:20px;*/ 

background-color:orange;

-moz-box-ordinal-group:3;

-webkit-box-ordinal-group:3;

}

#center{

-moz-box-flex:1; /*弹性盒布局自适应*/

-webkit-box-flex:1;/*弹性盒布局自适应*/

-moz-box-ordinal-group:1;

-webkit-box-ordinal-group:1;

/*padding:20px;*/

background-color:yellow;

}

#right{

/*width:200px;

padding:20px;*/

background-color:limegreen;

-moz-box-ordinal-group:2;

-webkit-box-ordinal-group:2;

}

#left, #center, #right{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

}

box-flex属性的值为空白区域的比例，对多个元素使用时，如果都等于1，则元素的值为空白区域的值除于各flex的值之和，即是所占的百分比。

五．指定水平方向和垂直方向的对齐方式

1.使用盒布局时，用box-pack属性及box-align属性来指定元素中的文字、图像及子元素水平方向或垂直方向的对齐方式。

属性值        排列方向       box-pack             box-align

start             h             左                   顶

center          h             中                   中

end              h             右                   底

start             v              顶                  左

center          v              中                  中

end              v              底                  右

 

//示例：使文字左右居中、垂直居中

div{

display:-moz-box;

display:-webkit-box;

-moz-box-align:center;

-moz-box-align:center;

-moz-box-pack:center;

-webkit-box-pack:center;

width:300px;

height:200px;

}