盒布局和多栏布局
2015-12-03 22:11
671 查看
【摘自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;
}
使用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;
}
相关文章推荐
- Android布局的小窍门?
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- Web布局连载——两栏固定布局(五)
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- HTML5中在客户端验证文件上传的大小
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 样式表CSS布局经验
- css网页布局中注意的几个问题小结
- DL.DT.DD实现左右的布局简单例子第1/2页