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;之後，它就變成了內聯元素，寬度，高度都不再起作用。