首先我們先了解一下行內元素和塊級元素

行內元素(內聯元素)：沒有自己的獨立空間，它是依附于其他塊級元素存在的，空間大小依附于內容多少。行內元素沒有度、寬度、內外邊距等屬性。

塊級元素：占據獨立的空間，具有寬度，高度，內外邊距等屬性。

內聯元素(行內元素)內聯元素(inline element)

* a - 錨點 * abbr - 縮寫 * acronym - 首字 * b - 粗體(不推薦) * bdo - bidi override * big

- 大字體 * br - 換行 * cite - 引用 * code - 計算機代碼(在引用源碼的時候需要) * dfn - 定義字段 * em - 強調 *

font - 字體設定(不推薦) * i - 斜體 * img - 圖片 * input - 輸入框 * kbd - 定義鍵盤文本 * label - 表格標簽

* q - 短引用 * s - 中劃線(不推薦) * samp - 定義范例計算機代碼 * select - 項目選擇 * small - 小字體文本 *

span - 常用內聯容器，定義文本內區塊 * strike - 中劃線 * strong - 粗體強調 * sub - 下標 * sup - 上標 *

textarea - 多行文本輸入框 * tt - 電傳文本 * u - 下劃線 * var - 定義變量

塊元素(block element) * address - 地址 * blockquote - 塊引用 * center - 舉中對齊塊 * dir -

目錄列表 * div - 常用塊級容易，也是css layout的主要標簽 * dl - 定義列表 * fieldset - form控制組 * form -

交互表單 * h1 - 大標題 * h2 - 副標題 * h3 - 3級標題 * h4 - 4級標題 * h5 - 5級標題 * h6 - 6級標題 * hr

- 水平分隔線 * isindex - input prompt * menu - 菜單列表 * noframes -

frames可選內容，(對于不支持frame的瀏覽器顯示此區塊內容 * noscript - )可選腳本內容(對于不支持script的瀏覽器顯示此內容) *

ol - 排序表單 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表

可變元素 可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。 * applet - java applet * button - 按鈕 * del

- 刪除文本 * iframe - inline frame * ins - 插入的文本 * map - 圖片區塊(map) * object -

object對象 * script - 客戶端腳本

對于內聯元素的垂直居中：在標簽中設置veritical-align:middle;即可

http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

Untitled Document

用戶名：

/>

塊級元素的垂直居中：

在此分為兩種情況 1、內容為單行只要加上line-height=標簽height即可

2、內容為多行時：設置父標簽display為table子標簽display為table-cell

、vertical-align為middle即可

http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

Untitled Document

http-equiv="Content-Type" content="text/html; charset=utf-8"

/>

Untitled Document

原文：http://www.cnblogs.com/chuxiazhiyin/p/3573693.html