2016年6月14日 星期二

塊狀元素(block element)和內聯元素(inline element)

block元素的特點:
  • 總是在新行上開始
  • 高度,行高以及頂和底邊距都可控制
  • 寬度缺省是它的容器的100%,除非設定一個寬度
  • 可以容納內聯元素和其他塊元素
inline元素的特點:
  • 和其他元素都在一行上
  • 高,行高及頂和底邊距不可改變
  • 寬度就是它的文字或圖片的寬度,不可改變
  • 只能容納文本或者其他內聯元素
塊元素(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 - 非排序列表
內聯元素(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 - 定義變量
可變元素:可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
  • applet - java applet
  • button - 按鈕
  • del - 刪除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 圖片區塊(map)
  • object - object對象
  • script - 客戶端腳本

塊狀與內聯元素之轉換:
  • display: block | inline

沒有留言: