塊元素:
- 用作web頁面中的主要構建模塊,每個塊元素都單獨顯示,就好像前後都有換行,特立獨行。
- 寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制。
內聯元素:
- 用來標記小段內容,會顯示在所在的段落中,隨波逐流。
- 寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變(即左右可變)。
設計頁面時,一般先從塊元素開始,然後在完善頁面時加入內聯元素。
通過CSS樣式可以控制元素的顯示,主要有以下三類
- display:block -- 顯示爲塊級元素
- display:inline -- 顯示爲內聯元素
- dipslay:inline-block -- 顯示爲內聯塊元素,表現爲同行顯示並可修改寬高內外邊距等屬性。
注意:內聯元素內可以放塊元素,內部的塊元素會撐大外部的內聯標籤,可以通過放塊元素來控制內聯元素的高度。
塊元素:
address----地址 | div----描述塊級元素 | form----交互表單 | h1----大標題 |
blockquote----快引用 | h2----副標題 | h3----3級標題 | h4----4級標題 |
center----居中對齊虧塊 | dir----目錄列表 | dl-----定義列表 | fieldest-----from控制組 |
h5----5級標題 | h6----6級標題 | hr----水平分割線 | menu----菜單列表 |
noframes----爲不支持框架的瀏覽器顯示文本 | noscript----如上 | ol----有序表單 | p----段落 |
pre----格式化文本 | table----表格 | ul----無序列表 |
內聯元素:
a----錨點 | abbr----縮寫 | acronym----首字母縮寫,h5不支持 |
b----不支持 |
bdo----指定文字方向 | big----大字體 | br----換行 | cite----引用 |
code----計算機代碼 | dfn----定義字段 | em----強調 | font----字體設定 |
i----斜體 | img----圖片 | input----輸入框 | kbd----鍵盤文本 |
label----表格 | q----短引用 | s----中劃線 | samp----範例計算機代碼 |
selest----選擇 | small----小字體文本 | span----常用內聯容器 | strike----中劃線 |
strong----粗體表強調 | sub----下標 | sup----上標 | textarea----多行文本輸入框 |
u----下劃線 | var---定義變量 |