行內(inline)元素
行內元素的特點:
1.行內元素前後不會換行,多個行內元素會排成一行,直到排滿一行
2.行內元素一般無法設置width和height屬性(替換元素除外)
3.行內元素設置margin和padding屬性時,只有margin-left,margin-right,padding-right和padding-left有效
常見的行內(inline)元素:
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)的特點:
1.塊級元素前後會單獨換行
2.塊級元素設置width,height,margin,padding屬性有效
常見的塊級(block)元素:
address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易,也是css layout的主要標籤
dl - 定義列表
fieldset - form控制組
form - 交互表單 (只能用來容納其它塊元素)
h1-h6 - 標題
hr - 水平分隔線
isindex - input prompt
menu - 菜單列表
noframes - frames可選內容,(對於不支持frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容(對於不支持script的瀏覽器顯示此內容)
ol - 排序表單
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
替換元素特點:
1.從元素本身的特點來講,可以分爲替換元素和不可替換元素
2.瀏覽器根據元素標籤和屬性決定顯示的內容。
3.替換元素本身沒有內容,是“空元素”
4.替換元素有內在尺寸,具有width和height屬性
5.替換元素的margin和padding屬性有效
常見的替換元素:
display:inline-block
通常用來設置非替換元素的行內元素。設置之後,該元素有以下特點:
1.將該對象呈遞爲inline對象,但是對象的內容作爲block對象呈現
2.設置的margin,padding,width和height屬性有效
3.相鄰的inline元素仍在同一行內