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

作者: haibao 分类: 笔记 发布时间: 2015-03-12 17:00
Done is better than perfect.比完美更重要的是完成。

以前常用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属性就可以很容易解决了。

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

本文地址:[CSS3 多栏布局与盒布局学习笔记],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

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

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>