CSS3之盒相关样式

在CSS中，使用display属性指定盒的类型。总体来说，CSS中的盒分为block类型和inline类型。block类型的元素的宽度会占满整个浏览器的宽度，而inline类型的元素的宽度只等于其内容所占的宽度。因此，每一行只允许一个block类型的元素，而可以并列容纳多个inline类型的元素。 

盒的类型

1. inline-block

看名字就知道，inline-block类型(在CSS2.1中追加)属于block类型盒的一种，但在显示时既具有inline类型盒的特点。即将元素的display属性设置为"inline-block"与设置为"inline"后的显示效果相同。
唯一的区别（仅限于目前鄙人所知的）在于使用width属性或height属性时，可以应用于inline-block类型的元素，而不能应用于inline类型的元素。因此，可以使用inline-block进行分列显示。

2.inline-table

由于table元素属于block类型，所以不能与其他inline类型元素处于一行。如需使table类型与其他inline元素处于一行时，可应用inline-table类型于table元素。

3.list-item

list-item可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。

4. run-in 和 compact

如果run-in元素后面还有block类型的元素，则会被包含在后面的block类型元素内部。

如果compact元素后面还有block类型的元素，则会被包含在后面的block类型元素的左边。

5. none

被指定为none类型的元素不会被显示。

关于盒中容纳不下的内容的显示

1. overflow

overflow指定对于盒中容纳不下的内容的显示方法。有如下几个属性值：

auto：内容超出元素的容纳范围时根据需要出现水平滚动条或垂直滚动条。

hidden: 内容超出容纳范围的文字将被隐藏起来不被显示。

scroll：被指定元素将出现固定的水平滚动条和垂直滚动条，超出元素的容纳范围时将被滚动显示。

visible: 与不使用overflow属性时的显示结果一样。

2. overflow-x和overflow-y

与overflow的使用方法一样，只是分别指定在水平方向上或垂直方向上如果内容超出元素的容纳范围时的显示方法。

3. text-overflow

当overflow的属性值设定为"hidden"时，将text-overflow指定为"ellipsis"则会显示一个省略号"..."来代替被隐藏的内容。

对盒使用阴影

box-shadow : length length length color

前三个length分别指阴影离开文字的横方向距离、纵方向距离和阴影的模糊半径。color是指阴影的颜色。

指定针对元素的宽度与高度的计算方法

众所周知，在CSS中使用width和height来指定元素的宽度与高度。但是使用box-sizing属性可以指定用width与height分别指定的宽度值与高度值是否包含元素的内部补白区域及边框的宽度与高度。

box-sizing可以指定以下两个值：

content-box: 表示元素的宽度与高度不包括内部补白区域以及边框的宽度与高度。

border-box: 表示元素的宽度与高度包括内部补白区域及边框的宽度与高度。