CSS3中的盒布局

CSS3中各种盒模型、概念、使用方法和浏览器支持情况，以及当内容溢出时的操作，给盒子添加阴影效果，如何使用CSS3中的属性来定义元素的宽度值和高度值中是否包含内补白区域以及边框的宽度和高度。

1、盒的基本类型：

在CSS3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型，比如div元素和p元素属于block类型，span元素和a元素属于inline类型；

2、inline-block类型：

（1）inline-block类型属于block类型的一直能够，但是在显示时具有inline类型的特点，比如将div元素中的display设置为inline-block和inline效果一样，inline设置了长度与宽度后内容不会出现溢出，而inline-block存在内容溢出；

（2）使用inline-block类型来执行分列显示：如果需要在一行中并列显示多个block类型的元素，需要使用float属性或者position属性，但是这样会使样式变得复杂，而使用inline-block类型使得并列显示多个block类型的元素操作变得很简单，默认情况下使用inline-block类型时并列显示的元素的垂直对齐方向是底部对齐，为了让对齐方式改成顶部对齐，还要给div元素的样式中加入vertical-align属性；

1）使用float属性或者position属性布局：

①HTML代码：

<div class="div">
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
</div>

②CSS代码：

.div1{
	width: 200px;
	height: 200px;
	background: lavenderblush;
	float: left;
}
.div2{
	width: 200px;
	height: 100px;
	background: lightblue;
	float: left;
}
.div3{
	width: 400px;
	height: 200px;
	background: khaki;
	clear: both;
}

③效果图如下：

2）使用inline-block布局：

①HTML代码：

<div class="div">
	<div class="div1"></div><div class="div2"></div><div class="div3"></div>
</div>

②CSS代码：

.div1{
	width: 200px;
	height: 200px;
	background: lavenderblush;
	display: inline-block;
	vertical-align: bottom;
}
.div2{
	width: 200px;
	height: 100px;
	background: lightblue;
	display: inline-block;
	vertical-align: top;
}
.div3{
	width: 400px;
	height: 200px;
	background: khaki;
}

③效果图如下：

（3）使用inline-block类型来显示水平菜单：如果要实现水平菜单，那么需要使用float属性，大多数菜单是利用ul列表和li列表项目来实现，li元素隶属于block类型下的list-item类型，所以要并列显示的话需要使用float；

1）使用float属性显示水平菜单：

① HTML代码：

<ul class="ul1">
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
	<li><a href="#">首页</a></li>
</ul>

②CSS代码：

.ul1>li{
	padding: 10px 20px;
	border-right: 1px solid #000000;
	float: left;
	list-style-type: none;
	background: lightblue;
	margin-top: 30px;
}
a{
	color: white;
	text-decoration: none;
}

③效果图如下：

2）使用inline-block属性显示水平菜单：

①HTML代码：

<ul class="ul2">
	<li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li>
</ul>

②CSS代码：

a{
	color: white;
	text-decoration: none;
}
.ul2>li{
	padding: 10px 20px;
	border-right: 1px solid #000000;
	list-style-type: none;
	background: lightblue;
	display: inline-block;
}

③效果图如下：

3、inline-table类型：

在CSS中使用table元素的示例，一个表格，前后都有文字将其围绕；

1） HTML代码：

这里是文字内容
<table border="1" cellspacing="no" cellpadding="no">
	<tr>
		<td>Header</td>
		<td>Header</td>
		<td>Header</td>
		<td>Header</td>
	</tr>
	<tr>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
		<td>Data</td>
	</tr>
</table>
这里是文字内容

2）CSS代码：

table{
	display: inline-table;
	vertical-align: bottom;
}

3）效果图如下：

4、list-item类型：

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

（1）HTML代码：

<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>

（2）CSS代码：

div{
	list-style-type: disc;
	margin-left: 50px;
	display: list-item;
}

（3）效果图如下：

5、run-in类型与compact类型：

将元素指定为run-in类型或者compact类型时，如果元素后面还有block类型的元素，run-in类型那个元素将被包括在后面的block类型的元素内部，而compact类型的元素将被放置在block类型的左边；

（1）HTML代码：

<dl class="run-in">
	<dt>run-in类型</dt>
	<dd>run-in类型的诠释</dd>
</dl>
<dl class="compact">
	<dt>compact类型</dt>
	<dd>compact类型的诠释</dd>
</dl>

（2）CSS代码：

dl.run-in dt{
	display: run-in;
	border: 1px solid red;
	background: lightblue;
	
}
dl.compact dt{
	display: compact;
	border: 1px solid blue;
	background: lightcoral;
}

（3）效果图如下：

6、表格相关类型：在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	代表整个表格的标题

通过一个小示例来指定各种div的类型为各种表格类型，让这些div构成一个完整的表格：

（1）HTML代码：

<div class="table">
	<div class="table-caption">表格标题</div>
	<div class="thead">
		<div class="tr">
			<div class="td">1</div>
			<div class="td">2</div>
			<div class="td">3</div>
		</div>
		<div class="tr">
			<div class="td">1</div>
			<div class="td">2</div>
			<div class="td">3</div>
		</div>
		<div class="tr">
			<div class="td">1</div>
			<div class="td">2</div>
			<div class="td">3</div>
		</div>
	</div>
</div>

（2）CSS代码：

.table{
	display: table;
	border: 1px solid red;
}
.table-caption{
	display: table-caption;
	width: 70px;
}
.thead{
	display: table-header-group;
}
.tr{
	display: table-row;
}
.td{
	display: table-cell;
	padding: 15px;
	border: 1px solid blue;
}

（3）效果图如下：

7、none类型：

当元素被指定了none类型后，这个元素将不会被显示；

8、各种浏览器对各种盒模型的支持情况：

盒类型	Firefox	Safari	Opera	IE8	chrome
inline	YES	YES	YES	YES	YES
inline-block	YES	YES	YES	YES	YES
block	YES	YES	YES	YES	YES
run-in	NO	YES	YES	NO	NO
none	YES	YES	YES	YES	YES
table	YES	YES	YES	YES	YES
table-cell	YES	YES	YES	YES	YES
table-column	YES	YES	NO	YES	NO
table-colgroup	YES	YES	NO	YES	NO
table-header-group	YES	YES	YES	YES	YES
table-row-group	YES	YES	YES	YES	YES
table-footer-group	YES	YES	YES	YES	YES
table-row	YES	YES	YES	YES	YES
table-caption	YES	YES	YES	YES	YES