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 - 图片

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

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

内联元素转化为块状元素：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;之后，它就变成了内联元素，宽度，高度都不再起作用。