CSS3 多列布局——Columns
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。 语法：
columns：<column-width> || <column-count>
多列布局columns属性参数主要就两个属性参数：列宽和列数。
| 参数 | 参数说明 |
|---|---|
<column-width> | 主要用来定义多列中每列的宽度 |
<column-count> | 主要用来定义多列中的列数 |
举例：要显示2栏显示，每栏宽度为200px，代码为：
columns: 200px 2;
到目前为止大部分主流浏览器都对其支持：
CSS3 多列布局——column-width
column-width的使用和CSS中的width属性一样，不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。基本语法如下所示 ；
column-width: auto | <length>
取值说明：
| 属性值 | 说明 |
|---|---|
| auto | 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 |
<length> | 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。 |
CSS3 多列布局——column-count
column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则：
column-count：auto | <integer>
取值说明：
| 属性值 | 属性值说明 |
|---|---|
| auto | 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 |
<integer> | 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。 |
例如：将列分成四列显示，代码如下：
column-count:4;
CSS3 列间距column-gap
column-gap主要用来设置列与列之间的间距，其语法规则如下：
column-gap: normal || <length>
取值说明
| 属性值 | 属性值说明 |
|---|---|
| normal | 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 |
<length> | 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。 |
例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：
column-count: 3;
column-gap: 2em;
CSS3 列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。
语法规则：
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
取值说明：
| 属性值 | 属性值说明 |
|---|---|
| column-rule-width | 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 |
| column-rule-style | 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 |
| column-rule-color | 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) |
例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为：
column-rule: 2px dotted green;
CSS3 跨列设置column-span
column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。
column-span: none | all
取值说明
| 属性值 | 属性值说明 |
|---|---|
| none | 此值为column-span的默认值，表示不跨越任何列。 |
| all | 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。 |
例如：将第一个标题跨越所有列，代码：
column-span:all;
效果如下：
CSS3 盒子模型
CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响，来看一张盒模型的3D展示图：
（单击可放大）
从图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。
box-sizing：
在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示：
- W3C标准盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）
2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：
box-sizing: content-box | border-box | inherit
取值说明
| 属性值 | 属性值说明 |
|---|---|
| content-box | 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height |
| border-box | 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。 |
| inherit | 使元素继承父元素的盒模型模式 |
其中最为关键的是box-sizing中content-box和border-box两者的区别，他们之间的区别可以通过下图来展示，其对盒模型的不同解析：
