当前位置: 首页 » 前端开发 » CSS3 多栏布局与盒布局学习笔记
 |  全屏浏览  |  字号调整:

CSS3 多栏布局与盒布局学习笔记

haibao 2015-03-12 17:00:24 前端开发 0 0 1.1 k 百度已收录
本文最后更新于2015-03-12,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:11月21日,世界问候日 - 1992年,厄瓜多尔发生海豚集体自杀事件

周三凌晨好, 本文除去代码部分,共1674个字,预计阅读时间需要5分钟。

以前常用float和position属性进行布局,但它们有一个比较明显的缺点,就是元素之间相对独立,底部不能对齐,导致页面中多出一块空白区域。
针对这个缺点,在css3中加入了多栏布局和盒布局方式。

1. 使用多栏布局可以使一个元素中的内容分为两栏或者多栏显示,并且确保各栏中内容的底部对齐。

要点1:通过column-count属性,将一个元素中的内容分为多栏进行显示。 它与使用float和position属性时的区别是:使用两个属性时只需单独设定每个元素的宽度即可,而使用多栏布局需要设定元素中多个栏目相加后的总的宽度。

示例代码:

1
div { -moz-column-count:2; -webkit-column-count:2; -moz-column-width:26em; -webkit-column-width:26em; }

要点2:通过column-gap属性,设定多栏之间的间隔距离。

示例代码:

1
div { -moz-column-gap: 2em;-webkit-column-gap: 2em; }

要点3:通过column-rule属性,在栏与栏之间增加一条间隔线,并且可以设定该间隔线的宽度和颜色等。

示例代码:

1
div { -moz-column-rule: 1px solid red; -webkit-column-rule: 1px solid red; }

2. 使用盒布局也可以解决上述所说的float和position的问题。

示例代码:

1
div { display: -moz-box; display: -webkit-box; }

盒布局和多栏布局的区别在于:使用多栏布局时,各栏宽度必须是相等的,在指定每栏宽度时,也只能为所有栏指定一个统一的宽度,栏与栏之间的宽度不可能是一样的。另外,使用多栏布局时,也不可能具体指定什么栏中显示什么内容,因此比较适合使用在显示文章内容的时候,不适合用于安排整个网页中由各元素组成的网页结构时。

3. 弹性盒布局

要点1: 使用自适应窗口的弹性盒布局(box-flex)

示例代码:

1
div { -moz-box-flex: 1; -webkit-box-flex: 1; }

要点2:改变元素的显示顺序(box-ordinal-group)

示例代码:

1
#left { -moz-box-ordinal-group: 3; } #middle {  -moz-box-ordinal-group: 2; } #right { -moz-box-ordinal-group: 1; }

默认的显示顺序应该是:#left #middle #right ,使用box-ordinal-group后的顺序为: #right #middle #left。

要点3: 改变元素的排列方向(box-orient)

示例代码:

1
div { -moz-box-orient: vertical; -webkit-box-orient: vertical; }

默认的排列方向是水平方向排序:horizontal,使用box-orient属性值为vertical后,变为垂直方向排序。

要点4:可以使用box-pack和box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。

示例代码:

1
div { display: -moz-box; display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; }

在css 1.0和css 2.0的时候,在div元素内部直接放字的场合下,如果想让文字垂直居中,由于div元素不能使用vertical-align属性的,所以很难做到。 但css3中只要让div元素使用box-align属性(排列方向默认为horizontal),文字就可以垂直居中了。 还有一种比较难处理的情况,就是如何让图像位于元素正中央,使用box-pack和box-align属性就可以很容易解决了。

好了,本篇终于写完了,打字真累啊。以上纯属个人理解,有什么不足的地方还请不吝指教。

文章编辑:haibao 发布于:2015-03-12 17:00:24

本文标题:CSS3 多栏布局与盒布局学习笔记

本文地址:http://www.hehaibao.com/css3-layout/

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

电子邮件地址不会被公开。 必填项已用*标注

切换注册

登录

忘记密码 ?

切换登录

注册