塊元素，行內元素以及可替換與不可替換元素
顯示 表現級區分：
塊元素 有以下這些：
<address><caption><dd><div><ol><ul><p><th><thead><tr><dl><table><tbody><td><fieldset><form><h1><li>
<dt>定義列表中的專案<hr>建立一條水平線<legend>元素為
fieldset 元素定義標題
<noframes>為那些不支援框架的瀏覽器顯示文字，於 frameset 元素內部<noscript>定義在指令碼未被執行時的替代內容
<pre>定義預格式化的文字<tfoot>定義表格的頁尾（腳註或表注）
行內元素：
<a><textarea><img><input><span><strong><abbr>表示一個縮寫形式<acronym>定義只取首字母縮寫<b>字型加粗<bdo>可覆蓋預設的文字方向<big>
大號字型加粗<br>換行<cite>引用進行定義<code>定義計算機程式碼文字<dfn>定義一個定義專案<em>定義為強調的內容<i>斜體文字效果<kbd> 定義鍵盤文字
<label>標籤為 input 元素定義標註（標記） <q>定義短的引用<samp>定義樣本文字
<select> 建立單選或多選選單<small>呈現小號字型效果<sub>定義下標文字<sup>定義上標文字
<tt>打字機或者等寬的文字效果
定義變數可變元素素列表--可變元素為根據上下文語境決定該元素為塊元素或者內聯元素：
<button><img><input><select><textarea><map><script>
<del>定義文件中已被刪除的文字<iframe>建立包含另外一個文件的內聯框架（即行內框架）
<ins> 標籤定義已經被插入文件中的文字 <object> object物件等。
區別：
（1）塊元素有正常的物理特性（width,height,padding,margrin等特性都可以正常表示）。垂直塊元素外邊距（margrin）會重合，行內左右元素外邊距不重合，浮動左右也不重合。
（2）行內可替換元素有物理特性。eg：
大多數是不可替換的，瀏覽器可以直接由html程式碼來識別決定它的大小樣子。
<span style="font-size:12px;"><html>
<head>
<style type="text/css">
.div1 {
height:40px;
width:100%;
background-color:green;
}
.div2 {
height:40px;
width:100%;
background-color:pink;
}
.input1{
height:40px;
}
a{line-height:40px;
background-color:red;
padding-left:100px;
padding-top:50px;
}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<div class="div1">
hello
</div>
<div class="div2">
<a href="xx">啥玩應兒 </a>
<a href="xx">啥玩應兒 </a>
</div>
<div class="div1">
hello
</div>
<input type="text" class = "input1"/>
</body>
</html></span>渲染區分
1、行內不可替換元素 沒有物理特性，所以設定width,height沒有用。但是padding，margrin的左右有用,而上下不計入行高計算，所以設定padding-top可能會導致視覺上溢位，但是在不溢位情況下還是有效果的。可以用line-height來設定行高後會居中，但是對實際行高沒影響。`
如上圖文字框可以設定大小。
<html>
<head>
<style type="text/css">
.div1 {
height:40px;
width:100%;
background-color:green;
}
.div2 {
height:40px;
width:100%;
background-color:pink;
}
a{line-height:40px;
background-color:red;
padding-left:100px;
padding-top:5px;//<span style="font-family: Arial, Helvetica, sans-serif;">padding-top:5px;</span>
}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<div class="div1">
hello
</div>
<div class="div2">
<a href="xx">啥玩應兒 </a>
<a href="xx">啥玩應兒 </a>
</div>
<div class="div1">
hello
<div/>
</body>
</html>
由圖可知line-height沒有作用，但是padding-top有效果。但是當padding-top為50px的時候就明顯有問題
由圖可知padding，margrin的左右有用,而上下不計入行高計算，所以設定padding-top可能會導致視覺上溢位
（4）可替換元素（一般也是行內元素）：如img input，有物理特性，沒有的話也有預設大小等樣式。