display:inline 会导致表格宽度 不好调整

这篇文章我们将要来讨论css里面的“块元素”和“内联元素”，并举例讲解用不好的时候，会导致哪些问题。

首先，我们来定义一下这两个概念。

块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”

	块状元素	内联元素
是否允许其他元素同处一行	no	yes
width和height是否起作用	yes	no

块元素(block element)包括：
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题 内联元素(inline element)包括
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体

img - 图片

* 块状元素 和 内联元素 相互转化

块状元素转化为内联元素：css设置display:inline ;

内联元素转化为块状元素：css设置display:block ;

由以上可知，块状元素可以和内联元素相互转化。

下面我们通过一个实例来讲解实际写网页时应该要注意的问题。

<style>
.wraper{
	width:800px;
	height:300px;
	background:#ddd;
}
.wraper table{
	width:100%;
}
.wraper table tr td{
  background:#aaa;
 }
</style>
<div class="wraper">
<table>
<tr>
<td>姓名</td>
<td>赵二虎</td>
</tr>
</table>
</div>

如上代码，由于外部div 的class=wraper,其宽度设置为800px；而内部的table 宽度设置为100%。所以table宽度也是800px，运行效果如下图。

<style>
.wraper{
	width:800px;
	height:300px;
	background:#ddd;
}
.wraper table{
	width:100%;
	display:inline;
}
.wraper table tr td{
  background:#aaa;
 }
</style>
<div class="wraper">
<table>
<tr>
<td>姓名</td>
<td>赵二虎</td>
</tr>
</table>
</div>

当我们在table 的样式里，在宽度后面加上display:inline;将此表格转换为内联元素之后，运行效果如下：

 

表格基本上没有了宽度，虽然css里面写的是width:100%。但是宽度已经不起作用了。因为table本来是一个块状元素，设置宽度能起作用。但是当我们在

后面加上一个display:inline;之后，它就变成了内联元素，宽度，高度都不再起作用。