塊元素、內聯元素與內聯塊
1、塊元素
1.1塊元素又名塊級元素(block element)，
其特點是：
①總是在新行上開始；
②高度，行高以及外邊距和內邊距都可控制；
③寬度缺省是它的容器的100%，除非設定一個寬度。
④它可以容納內聯元素和其他塊元素
1.2常用的塊元素
- 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 - 非排序列表（無序列表）
2、內聯元素
2.1內聯元素(inline element)
其特點是：
①和其他元素都在一行上；
②高，行高及外邊距和內邊距不可改變；
③寬度就是它的文字或圖片的寬度，不可改變
④內聯元素只能容納文本或者其他內聯元素
2.2常見的內聯元素
- 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 - 下劃線
2.1內聯元素可能會遇到的問題
2.1.1內聯元素與內聯元素之間存在間隙
2.1.2.解決內聯元素的間隙方法:
(1)設置margin-left爲負值
(2)去掉內聯元素之間的換行
(3)將內聯元素的父級設置font-size爲0,內聯元素自身再設置font-size
3、內聯塊
也稱行內塊元素,img和input元素的行爲類型這種元素,但是也歸類於內聯元素,可以用display屬性將塊元素或內聯元素轉化成這種元素
其特點是：
(1)可以設置所有樣式（與塊元素一樣）
(2) 如果不設置寬度高度,則寬度高度由內容決定
(3)不會獨佔一行（與內聯元素一下）
(4)不換行時，元素之間會產生左右間距（與內聯元素相同）；換行時，如果元素內部沒有內容,元素之間就會產生上下間距
(5)子元素是內聯塊元素,父元素可以用text-align設置子元素水平對齊方式,用line-height屬性設置子元素垂直對齊方式
4、塊元素、內聯元素與內聯塊之間的相互轉換
將塊元素轉換成內聯元素，就可以使多個塊元素在同一行顯示，不換行
將內聯元素轉換成塊元素，就可以設置其寬高，會獨佔一行
3.1.將內聯元素轉化爲塊元素：display：block
display: block;/*將內聯元素轉換成塊元素*/
3.2將塊元素轉化爲內聯元素：display：inline
display: inline;/*將塊元素轉換成內聯元素*/
3.3將塊元素或者內聯元素轉換成內聯塊
display: inline-block;/*將塊元素或者內聯元素轉換成內聯塊*/