1 盒的类型
在CSS中，使用display属性来定义盒的类型。
-
block类型
-
inline类型
-
inline-block类型
（1）在CSS2.1中追加的一个盒类型。
（2）目前为止，它受到了Safari、 Chrome、Firefox、Opera、IE8以上版本浏览器的支持。
（3）该类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点。
-
inline-table类型
（1）CSS2 中新增的盒类型。
（2）目前为止，它受到了Safari、 Chrome、Firefox、Opera、IE8以上版本浏览器的支持。
（3）因为table元素属于block类型，所以不能与其他文字处于同一行中，但是如果将table元素改成inline-table类型，就可以让表格与其他文字处于同一行中了。
table｛
display：inline-table；
border：solid 3px #00aaff；
｝
（4）文字与表格的默认垂直对齐方式
底部对齐（Safari、Chrome）、顶部对齐（Firefox、Opera、IE）
（5）显示设置垂直对齐方式
table｛
display：inline-table；
border：solid 3px #00aaff；
vertical-align：bottom；
｝
-
list-item类型；
（1）将元素作为列表来显示，同时在元素的开头上加上列表的标记。
（2）可使用 list-style-type属性设置列表的标记。
div｛
display：list-item；
list-style-type：circle；
margin-left：30px；
｝
-
run-in类型与compact类型
（1）run-in类型：如果元素后面还有block类型的元素， run-in类型的元素将被包含在后面的block类型的元素内。（Safari支持）
（2）compact类型：如果元素后面还有block类型的元素，compact类型的元素将被包含在后面的block类型的元素左边。（Opera支持）
-
none类型
将元素的类型指定为none类型后，该元素将不会被显示。
-
表格相关类型
| 元素 |
所属类型 |
说明 |
| 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 |
代表整个表格的标题 |
2 对于盒中容纳不下的内容的显示
-
overflow属性
值：hidden、scroll、auto
-
overflow-x属性、overflow-y属性
值：hidden、scroll、auto
-
text-overflow属性
可以在盒的末尾显示一个代表省略的符号。只在当盒中的内容在水平方向上超出盒的内容范围时有效。
div｛
overflow：hidden；
text-overflow：ellipsis；
white-space：nowrap；（使盒的右端内容不能换行显示）
width：300px；
border：solid 1px orange；
｝
3 对盒使用阴影
box-shadow属性
（1）功能：让盒在显示时产生阴影效果。
（2）使用方法：
box-shadow：length length length color（阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色）
（3）浏览器支持
到目前为止：Safari、Chrome 、Firefox、Opera浏览器支持该属性。
div{
background-color：#ffaa00；
box-shadow：10px 10px 10px gray；
width：200px；
height：100px；
}
（4）将参数设定为0
阴影的模糊半径为0：将绘制不向外模糊的阴影。
阴影离开文字的横方向距离、纵方向距离均设为0：将在盒的周围绘制阴影。值可设置为负值，变为向左/上绘制阴影。
（5）创建盒内阴影
可以通过一个可选的inset关键字在盒元素内部创建阴影，该阴影只被创建在盒元素内部，超出盒元素边框的部分将被裁减。
div{
background-color：#ffaa00；
box-shadow：inset 0 0 5px 5px #888；（指定盒内部阴影的水平方向与垂直方向上的偏移距离均为0，模糊半径与展开半径均为5个像素）
width：200px；
height：100px；
}
（6）对盒内子元素使用阴影
可以单独对盒内的子元素使用阴影。
（7）对第一个文字或第一行使用阴影
使用first-letter选择器或first-line选择器。
第一个文字：
div：first-letter{
font-size：22px；
float：left；
background-color：#ffaa00；
box-shadow：5px 5px 5px gray；
}
（8）对表格及单元格使用阴影
table{
border-spacing：10px；
box-shadow：5px 5px 20px gray；
}
td{
background-color：#ffaa00；
box-shadow：5px 5px 5px gray；
padding：10px；
}
4 指定针对元素的宽度与高度的计算方法
box-sizing属性
（1）在CSS中，使用width属性与height属性来指定元素的宽度和高度。使用该属性可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素的内容补白区域与边框的宽度与高度。
（2）属性值
content-box：表示元素的高度与宽度不包括内部补白区域与边框的宽度与高度。
border-box：表示元素的宽度与高度包括内容补白区域与边框的宽度与高度。
注意：不使用box-sizing属性时，默认使用content-box属性值。
（3）Firefox中的padding-box属性值
指定的宽度与高度包括内容的宽度和高度和内容补白区域的宽度和高度，不包括边框的宽度与高度。