CSS3属性——（二）
盒模型
1）盒的基本类型
在CSS3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型
比如之前我们所学div元素就属于block类型，span和a属于inline类型。
2）inline-block类型
inline-block类型是CSS2.1中追加的一个盒类型。inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点。
3）使用inline-block类型来执行分列显示
在CSS2.1之前，若需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但会让样式变复杂，所以在CSS2.1中追加了inline-block类型，使得并列显示多个block类型的元素操作变简单。
4）使用inline-block类型来显示水平菜单
在CSS2.1之前，如果要实现水平菜单，需要使用float属性，大多菜单是利用ul列表和li列表显示的，li元素隶属于block类型下的list-item类型，所以并列显示的话需要使用float属性
list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。
5）run-in类型与compact类型
将元素指定为run-in类型或者compact类型，如果元素后面还有block类型的元素，run-in类型的元素将被包括在后面的block类型的元素内部，而compact类型的元素将被放置在block类型元素的左边。
6）表格相关类型
包含元素：
table：代表整个表格
tr：代表表格中的一行
td：代表表格中的单元格
th：代表单元格中的列标题
tbody：代表表格中的所有行
thead：代表表格中的表头部分
tfoot：代表表格中的脚注部分
col：代表表格中的一列
colgroup：代表表格中的所有列
caption：代表整个表格的标题
7）none元素
当元素被指定了none类型后，这个元素将不会被显示
显示不下的内容
当我们在样式中设置了宽度和高度后，就有可能出现内容溢出的情况，可以使用overflow属性来指定如何显示盒子内显示不下的内容
1）overflow属性
overflow属性用来指定对盒中容纳不下的内容的显示方法
取值：
hidden：超出容纳范围的文字将被隐藏
scroll：div元素中出现水平与垂直的滚动条，超出的内容被滚动条显示
auto：文字超出div范围时，根据需要出现水平滚动条或者垂直滚动条，滚动显示超出的内容
visible：和不使用overflow时候的显示效果一样，超出的文字按原样显示
2）overflow-x属性和overflow-y属性
使用overflow-x属性或者overflow-y属性，可以单独指定可以在水平或者垂直方向上如果内容超出盒的容纳范围时的显示方法。
3）text-overflow属性
通过使用text-overflow属性，可以在盒的末尾显示一个代表省略的符号“...”，但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效
盒阴影
1）box-shadow属性的使用方法
在CSS3中，使用box-shadow属性让盒在显示的时候产生阴影效果
使用方法：box-shadow：length length length color
2）对盒内子元素使用阴影（span）
3）对第一个文字或第一行使用阴影
通过使用first-letter选择器或first-line选择器可以只让第一个字或者第一行字具有阴影效果
4）对表格及单元格使用阴影
可以使用box-shadow属性让表格及表格内的单元格产生阴影效果
box-sizing属性
使用box-sizing属性来指定针对元素的宽度与高度的计算方法
圆角边框
border-radius属性：进行圆角边框的绘制
使用方法：border-radius：Apx Bpx
第一个半径作为边框左上角与边框右下角的圆半径来绘制
第二个半径作为边框右上角与边框左下角的圆半径来绘制
不显示边框时：如果CSS3中，使用了border- radius属性但是把边框设置为不显示，浏览器会将背景设置为圆角显示
修改边框种类时，不管是什么种类，都会将边框沿着圆角曲线设置
绘制4个不同半径的圆角边框
border-top-left-radius：左上角半径
border-bottom-left-radius：左下角半径
border-top-right-radius：右上角半径
border-bottom-right-radius：右下角半径
图像边框
在CSS3中增加了一个border-image属性，可以让元素的长度或者宽度处于随时变化时，变化状态的边框统一使用一个图像文件来绘制。
1.border-image属性最简单的使用方法
webkit-border-image：url（"边框图像的路径"）上边距 右边距 下边距 左边距；
moz-border-image：url（"边框图像的路径"）上边距 右边距 下边距 左边距；
o-border-image：url（"边框图像的路径"）上边距 右边距 下边距 左边距；
border-border-image：url（"边框图像的路径"）上边距 右边距 下边距 左边距；
上边参数中，图像路径、上下左右边距必须指定，但如果四个值完全一样可以缩写为：border-image：url（"边框图像的路径"）边距；
