网络生活——关注网络，关注前端设计

首页 > css, 网页设计 > CSS3 Columns属性研究

CSS3 Columns属性研究

2009年8月6日雨无形发表评论阅读评论

CSS3 Columns属性研究

Columns属性是用来制作类似杂志布局，下面是该属性的简单介绍：

这个属性也相对来说比较简单，主要用于杂志式的布局，在Mozilla 和 Webkit 核心浏览器中需要前缀书写，带代码如下：

-moz-column-count: 2; /* For FireFox */
-webkit-column-count: 2; /* For Safari/Chrome */
column-count: 2; /* For when the standard gets fully supported */
-moz-column-width: 250px; /* For FireFox */
-webkit-column-width: 250px; /* For Safari/Chrome */
column-width: 250px; /* For when the standard gets fully supported */

这段代码分别是定义的栏数根每栏的宽度

支持此属性的浏览器：Safari 3.1+, FireFox 3.5, Chrome 1.0+

属性的使用很简单，比如要做一个宽度固定为800px，4栏的布局可以用如下代码：

width: 800px;
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;

同样如果要制作一个高度固定为400px，每栏宽度300px的布局可以用如下代码

height:400px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
column-width: 300px;

但是如果同同时使用了column-width和column-count会有怎么样的效果呢？
我们实验一下最开头的代码，

-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-width: 250px;
-webkit-column-width: 250px;
column-width: 250px;

分别用FF3.5和chrome/safari打开看一下
我们发现chrome/safari是按照设定的每栏宽250px，两栏显示的，但是FF下却成了两栏，但是每栏的宽变成了整个容器的50%的宽度。说明在FF下优先考虑的是容器的宽度。

然后我们再测试一下极端一点的情况：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .textcol { height:400px; background:#FC0; -moz-column-count: 2; /* For FireFox */ -webkit-column-count: 2; /* For Safari/Chrome */ column-count: 2; /* For when the standard gets fully supported */ -moz-column-width: 250px; /* For FireFox */ -webkit-column-width: 250px; /* For Safari/Chrome */ column-width: 250px; /* For when the standard gets fully supported */} </style> </head> <body> <div class="textcol"> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> <p>前言：昨天介绍了一个text-shadow的CSS3属性，NB吧，今天专门去查了一下CSS3的其它属性，发现这篇文章不错，特别转帖过来。</p> <p>原文：<a href="http://www.elliotswan.com/2009/07/27/9-css3-properties-you-can-use-now/">9 CSS3 Properties You Can Use Now</a></p> <p>当你看到很多自己期待的属性在CSS3中出现，肯定会兴奋不已，而在之前这些都是需要一些浏览器hack实现。</p> <p>下面就介绍一下CSS3中9个现在可以并且经常被你使用的属性，以及如何去使用。</p> <h3>1.Text-shadow</h3> <p>这个属性使用的属性值是这样定义的：</p> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在限定了高度，栏数，栏宽，字数又超过了的情况下，在FF下，栏宽还是容器宽度的50%，栏宽的限制也不起作用了，唯一起作用的是高度，在chrome/Safari下，栏宽跟高度还是保持，栏数超出设置。这个在使用这个属性的时候都是要注意的。

分类: css, 网页设计标签: css, css3

评论 (0) Trackbacks (0) 发表评论 Trackback

本文目前尚无任何评论.

本文目前尚无任何 trackbacks 和 pingbacks.

关于读书 9个你现在可以使用的CSS3属性

网络生活——关注网络，关注前端设计

CSS3 Columns属性研究

最近评论

分类目录

功能

月度索引

链接表

我在读的书

我想读的书