五、盒相关样式
盒的类型
一、盒的基本类型
在css中，使用display属性来定义盒的类型。总体来说，css中盒分为block类型与inline类型，例如div和p属于block类型，span和a属于inline类型。每一行只允许容纳一个block类型的元素，但是可以容纳多个inline类型的元素。
二、inline-block类型（inline-block类型盒加宽度时宽度会改变，inline类型盒加宽度盒不变）
Inline-block类型是在CSS2.1中追加的一个盒模型，目前为止，它受到了safari浏览器、Opera浏览器、Chrome浏览器、Firefox浏览器以及IE8以上版本浏览器的支持。inline-block类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点。
默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式时底部对齐，如果想改为顶部对齐，还需要在div元素的样式中加入vertical-align属性。去掉换行符加float。
三、inline-tablel类型
inline-tablel类型是css2中新增的盒类型，到目前为止，该类型受到了safari、opera、chrome、firefox以及IE8以上版本浏览器的支持。
四、list-item类型
如果元素的类型设置为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记（list-style-type）。
五、run-in类型与compact类型
将元素指定为run-in类型或compact类型，如果元素后面还有一个block类型的元素，run-in类型将被包含在block类型的元素内部，而compact类型的元素将被放置在block类型元素的左边。目前，run-in类型只被opera浏览器与safari浏览器支持，compact类型只被opera浏览器支持。chrome和firefox不支持run-in，部分ie支持run-in。
六、表格相关类型
在css3中所有与表格相关的元素及其所属类型：
| 元素 | 所属类型 | 说明 |
| table | table |
代表整个表格 |
|
table |
inline-table |
代表整个表格，可以被指定为table类型，也可以的被指定为inline-table类型 |
| tr | table-row | 代表表格中的一行 |
| td | table-cell | 代表表格中的一个单元格 |
| th | table-cell | 代表表格中的列标题 |
| tbody | table-row-group | 代表表格中的所有行 |
| thead | table-header-group | 代表表格中的表头部分 |
| tfoot | table-footer-group | 代表表格中的脚注部分 |
| col | table-column | 代表表格中的一列 |
| colgroup | table-column-group | 代表表格中的所有列 |
| caption | table-caption | 代表整个表格的头部 |
七、none类型
将元素的类型指定为none类型，该元素将不会显示。
八、对于盒中容纳不下的内容的情况，可以使用overflow属性来指定如何显示盒中容纳不下的内容。与overflow属性相关的还有overflow-x、overflow-y以及text-overflow属性。
- overflow:hidden 超出内容隐藏起来
- overflow:scroll 出现固定的水平滚动条与垂直滚动条，文字超出div元素的容纳范围时将被滚动显示。
- overflow:auto 根据需要出现水平滚动条与垂直滚动条
- overflow-x
- overflow-y
- text-overflow 在盒的末尾显示一个代表省略的符号“...”，ie6以上浏览器支持，firefox、chrome、safari、opera浏览器支持。
- white-space:nowrap 使盒的右端内容不能换行显示
末尾出现省略号的样式：{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
九、对盒使用阴影
1、box-shadow（内阴影用inset）
box-shadow:inset length length length length color，4个length分别是指定盒元素内部阴影的水平方向和垂直方向上偏移的距离，模糊半径与展开半径。
2、对盒内元素使用阴影
3、对第一个文字或第一行使用阴影
4、对表格及单元格使用阴影
十、针对元素的宽度与高度的计算方法
在css3中，使用box-sizing属性来指定针对元素宽度与高度的计算方法，指定宽度值与高度值是否包含元素的内部补白区域与边框的宽度与高度。
- box-sizing:content-box，不包含补白区域和边框的宽度与高度，也是box-sizing的默认属性
- box-sizing:border-box，包含补白区域和边框的宽度
为什么要使用box-sizing呢？使用box-sizing属性的目的是为了对元素的总宽度进行控制。
