第二十八章 CSS3多列布局
一、早期多列问题
//五段内容，分为三列
<div>
<p>。。。</p>
<p>。。。</p>
<p>。。。</p>
<p>。。。</p>
<p>。。。</p>
</div>
//带标题的五段内容，分为三列。
<div>
<h3>第一段内容</h3>
<p>。。。</p>
<h3>第二段内容</h3>
<p>。。。</p>
<h3>第三段内容</h3>
<p>。。。</p>
<h3>第四段内容</h3>
<p>。。。</p>
<h3>第五段内容</h3>
<p>。。。</p>
</div>
所以CSS3提供了多列布局属性columns来实现这个动态变换功能
二、属性及版本
CSS3提供了columns多列布局属性等7个属性集合，具体如下
属性 说明
columns 集成columns-width和columns-count两个属性
columns-width 定义每列宽度
columns-count 定义分列宽度
columns-gap 定义列间距
columns-rule 定义列边框
columns-span 定义多列布局中子元素跨列效果，Firefox不支持
columns-fill 控制每列的列高效果，主流浏览器不支持
由于column属性尚未纳入标准，大多数浏览器必须带上厂商前缀才能使用，好在主流浏览器大多能支持了，下面是主流浏览器支持情况和前缀情况
Opera Firefox Chrome Safari IE
支持需带前缀 11.5～29 2～40 4～45 3.1～8 无
支持不带前缀 无 无 无 无 10.0+
//通过上面的表格，了解到想让最新的浏览器全部实现效果，都必须使用前缀
//完整形式
-webkit-columns：150px 4;
-moz-columns：150px 4;
columns：150px 4;
三、属性解释
为了方便解释，就用Firefox浏览器测试，只用-moz-前缀展示
1、columns 是一个复合属性，包含columns-width和columns-count这两种简写，意为同时设置为分列列数和分列宽度
//分成四列，每列宽度自适应
-moz-columns:auto 4；
2、column-width 属性用于设置每列的宽度
//设置列宽
div{
-moz-columns:100px 3; //当拉动浏览器边框缩小是，不足以支持3列，会自动变成2列，最后变成1列，1列最小宽度为100px。
}
// -moz-columns-width:100px； (如果没有设置列数，但设置了像素，系统会自动设置列数)
属性值 说明
(1) auto 默认值，自适应
(2) 长度值 设置列宽
3、column-count 用于设置多少列
//设置列数
-moz-columns-count: 4；
(1)auto 默认值，表示就一列
(2)数值 设置列数
4、column-gap 用于设置列间距
-moz-columns-gap:100px;
(1)(2)同上
5、column-rule 设置每列中间的分割线
-moz-columns-rule:2px dashed gray;
(1)columns-rule <宽度><样式><颜色>的边框简写形式
(2)columns-rule-width 单独设置边框宽度
(3)columns-rule-style 单独设置边框的样式
(4)columns-rule-color 单独设置边框的颜色
判断线不会影响到布局，他会根据布局的缩放自我调节是否显示，如果我们把页面缩放到只能显示一列时，他自动消失。
6、column-span 设置跨列大标题
-webkit-column-span:all; (由于火狐尚未支持，先用webkit)
(1)none 默认值，表示不同跨列
(2)all 表示跨列-