10.2.5　　表格相关的盒模型

　　　　CSS3还为display提供了如下属性值。

　　　　table:将目标HTMl组件显示为表格。

　　　　table-caption:将目标HTML组件显示为表格标题。

　　　　table-cell:将目标HTML组件显示为单元格。

　　　　table-column:将目标HTML组件显示为表格列。

　　　　table-column-group:将目标HTML组件显示为表格列组。

　　　　table-header-group:将目标HTML组件显示为表格头部分。

　　　　table-footer-group:将目标HTML组件显示为表格页脚部分。

　　　　table-row:将目标HTML组件显示为表格行。

　　　　table-row:group:将目标HTML组件显示为表格行组。

10.2.6　　list-item盒模型

　　　　list-item模型可以将目标组件转换为类型于<ul>的列表元素，也可以同时在元素前面添加列表标志。

　　　　代码示范：

　　　　　　设置div为列表元素且在元素前面添加列表标志的CSS样式

　　　　　　div{

　　　　　　　　display:list-item;

　　　　　　　　list-style-type:square;

　　　　　　}

10.2.7　　run-in盒模型

　　　　run-in盒模型的组件组要用于希望显示在它后面的元素内部，如果run-in盒模型的组件后面紧跟一个block盒模型元素

　　　　那么run-in盒模型的元素将被放入后面的元素内部中显示。

　　　　代码示范：

　　　　为div1元素设置run-in盒模型

　　　　div1{

　　　　　　　　width:200px;

　　　　　　　　height:200px;

　　　　　　　　display:run-in;

　　　　　　}

　　　　为div2元素设置block盒模型

　　　　div2{

　　　　　　　　width:500px;

　　　　　　　　height:500px;

　　　　　　　　display:block;

　　　　　　}

　　　　上面div1和div2的样式的结果为div1在div2的内部中显示

10.3　　对盒添加阴影

　　　　CSS3增加了box-shadow属性为盒模型添加阴影，该属性可用于为整个盒模型添加阴影。

　　10.3.1　　使用box-shadow属性

　　　　　　box-shadow属性可以为所有盒模型的元素整体增加阴影。这是一个复合属性。它包含如下5个值：

　　　　　　　　hOffset:该属性值控制阴影在水平方向的偏移。

　　　　　　　　vOffset:该属性值控制阴影在垂直方向的偏移。

　　　　　　　　blurLength:该属性值控制阴影的模糊程度。

　　　　　　　　scaleLength:该属性值控制阴影的缩放程度。

　　　　　　　　color：该属性控制阴影的颜色。

　　　　　　代码示范：

　　　　　　　　为div元素添加左上阴影的CSS样式

　　　　　　　　div{

　　　　　　　　　　width:300px;

　　　　　　　　　　height:300px;

　　　　　　　　　　border:1px solid;

　　　　　　　　　　margin:30px;

　　　　　　　　　　box-shadow:-10px -8px 6px #444;

　　　　　　　　　　}

10.4　　CSS3的多栏布局

　　　　10.4.1　　CSS3新增的分栏功能

　　　　　　通过CSS3实现分栏非常简单，只要简单地增加column-count属性即可。

　　　　　　代码示范：

　　　　　　　　//为div元素设置把该div中的内容分为两栏显示

　　　　　　　　div{

　　　　　　　　　　column-count:2;

　　　　　　　　}

　　　　实际上，为了实现分栏效果CSS3增加了大量属性，如下所示。

　　　　　　columns：这是一个复合属性，通过该属性可同时指定栏目宽度、栏目数两个属性值。该属性相当于

　　　　　　　　　　　　同时指定column-width、column-count属性。

　　　　　　column-width：该属性指定一个长度值，用于指定每个栏目的宽度。

　　　　　　column-count：该属性指定一个整数值，用于指定栏目数。

　　　　　　column-rule：这是一个复合属性，用于指定各栏目之间的分隔条。该属性可同时指定分隔条的宽度、

　　　　　　　　　　　　　　样式、颜色。该属性相当于同时指定column-rule-width、column-rule-style、column-rule-color属性。

　　　　　　column-rule-width：该属性指定一个长度值，用于指定栏目之间分隔条的宽度。

　　　　　　column-rule-style：该属性用于设置分隔条的线型。该属性支持的属性值有none、dotted、dashed、solid、double等等，这些

　　　　　　　　　　　　　　　　属性值与前面介绍边框线型时各属性值的意义完全相同。

　　　　　　column-rule-color：该属性用于设置分隔条的颜色。

　　　　　　column-gap：该属性指定一个长度值，用于指定各栏目之间的间距。

　　　　　　column-fill：该属性用于控制栏目的高度。该属性支持如下两个属性值。

　　　　　　　　auto：各栏目的高度随着其内容的多少自动变化。

　　　　　　　　balance：各栏目的高度将会统一成内容最多的那一栏的高度。