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：各栏目的高度将会统一成内容最多的那一栏的高度。
7月19号=》231页-240页,布布扣,bubuko.com
原文地址：http://www.cnblogs.com/duzuoyan/p/3856276.html
