塊元素和內聯元素區別與聯繫

塊元素:

  • 用作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---定義變量
 



發佈了39 篇原創文章 · 獲贊 13 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章