10.4.2　　使用box盒模型实现多栏布局

　　　　　　与通过float、inline-box方式实现的多栏布局相比，使用box属性值来实现多栏布局可以让多个栏目的底部对齐。

　　　　　　代码示范：

　　　　　　　　//为元素设置display属性为box样式

　　　　　　　　#container{

　　　　　　　　　　display:box;

　　　　　　　　　　width:960;

　　　　　　　　　　text-align:left;

　　　　　　　　}

　　　　　　　　//为#container元素下的div设置多栏布局的样式

　　　　　　　　#container>div{

　　　　　　　　　　border:1px solid;

　　　　　　　　　　box-sizing:border-box;

　　　　　　　　　　border-radius:12px 12px 0px 0px;

　　　　　　　　　　background-color:#ccc;

　　　　　　　　　　padding:5px;

　　　　　　　　}

　　　　　　页面代码：

　　　　　　　　<div id="container">

　　　　　　　　　　<div style="width:220px"></div>

　　　　　　　　　　<div style="width:500px"></div>

　　　　　　　　　　<div style="width:240px"></div>

　　　　　　　　</div>

　　　　除此之外，CSS3为box盒模型提供了如下属性。

　　　　　　box-orient：设置box盒模型里子元素的排列方向。该属性支持如下两个属性值。

　　　　　　　　horizontal：box盒模型里的子元素水平排列。如果没有为子元素指定高度，水平排列的box盒模型

　　　　　　　　　　　　　　里子元素的高度等于父容器的高度。

　　　　　　　　vertical：box盒模型里的子元素垂直排列。如果没有为子元素指定宽度，垂直排列的box盒模型里

　　　　　　　　　　　　　子元素的宽度等于父容器的宽度。

　　　　　　box-ordinal-group：设置box盒模型里子元素的显示顺序。

　　　　　　box-file：设置box盒模型里子元素自适应宽度的比例。例如，box盒模型多余的空白宽度为150px，其中

　　　　　　　　　　　　第一个子元素设置的box-flex为1，第二个子元素设置box-flex为2，那么多余的空白宽度

　　　　　　　　　　　　将会分给第一个元素的宽度为150*1/(1+2)即50px;，分给第二个子元素的宽度为150*2/(1+2)即100px。

11.1　　表格相关属性

　　　　　　表格相关属性主要用于控制表格的外观，表格相关属性有如下几个。

　　　　　　　　border-collapse：用于设置表格里行和单元格边框的显示方式，该属性控制两个单元格的边框是否合并在一起，

　　　　　　　　　　　　　　　　  还是按照标准的HTML样式分开该属性有两个值，即seperate(边框分开，使得单元格的分割线

　　　　　　　　　　　　　　　　  为双线)和collapse(边框合并，使得单元格的分隔为单线)。

　　　　　　　　border-spacing：当设置border-collapse为seperate时，该属性用于设置两个单元格边框之间的距离。

　　　　　　　　caption-side：用于设置表格标题位于表格的哪边。该属性必须和<caption>元素一起使用。该属性有

　　　　　　　　　　　　　　　　4个值，即top、bottom、left、right，分别对应于将表格标题放在表格的上、下、左、右。

　　　　　　　　empty-cells：该属性控制单元格内没有内容时，是否显示单元格边框。只有当border-collapse属性设置成

　　　　　　　　　　　　　　　　seperate时，该属性才有效。该属性支持show(显示)和hide(隐藏)两个属性值。

　　　　　　　　table-layout：用于设置表格宽度布局的方法。该属性支持auto和fixed两个属性值，其中auto是默认值，也就

　　　　　　　　　　　　　　　　是平时常见的表格布局方式；fixed则指定使用固定布局方式。

11.2　　列表相关属性

　　　　　　列表相关属性有如下几个。

　　　　　　　　list-style：这是一个复合属性，使用该属性可以同时指定list-style-image、list-style-position、list-style-type三个属性。

　　　　　　　　list-style-image：该属性用于指定作为列表项标记的图片。

　　　　　　　　list-style-position：该属性用于指定列表项标记出现的位置。该属性支持outside(列表项标记放在列表元素之外)和inside

　　　　　　　　　　　　　　　　　　(列表项标记放在列表元素之内)两个属性值。

　　　　　　　　list-style-type：该属性用于指定列表项标记的样式。该属性支持如下属性值。

　　　　　　　　　　decimal：阿拉伯数字。默认值。

　　　　　　　　　　disc：实心圆。

　　　　　　　　　　circle：空心圆。

　　　　　　　　　　square：实心方块。

　　　　　　　　　　lower-roman：小写罗马数字。

　　　　　　　　　　upper-roman：大写罗马数字。

　　　　　　　　　　lower-alpha：小写英文字母。

　　　　　　　　　　upper-alpha：大写英文字母。

　　　　　　　　　　none：不使用项目符号。

　　　　　　　　　　cjk-ideographic：浅白的表意数字。

　　　　　　　　　　georgian：传统的乔治数字。

　　　　　　　　　　lower-greek：基本的希腊小写字母。

　　　　　　　　　　hebrew：传统的希伯莱数字。

　　　　　　　　　　hiragana：日文平假名字符。

　　　　　　　　　　hiragana-iroha：日文平假名序号。

　　　　　　　　　　katakana：日文片假名字符。

　　　　　　　　　　katakana-iroha：日文片假名序号。

　　　　　　　　　　lower-latin：小写拉丁字母。

　　　　　　　　　　upper-latin：大写拉丁字母。

　　　　　　需要指出的是如果为元素同时指定了列表项标记图片(list-style-image)和列表项标记样式(list-style-type)，此时

　　　　　　list-style-image属性将会覆盖list-style-type属性。