- 行內元素
- 相鄰元素可以在一行顯示直到一行排不下才進行換行。
- 不可設置寬高、對齊等屬性,寬度隨內容變化。
- padding和margin的設置中,水平方向(padding-left...)有效果,垂直方向無效果。
- 行內元素只能容納文本或則其他行內元素。
- 塊級元素
- 占一行或多行。
- 可設置寬高。
- 排列從上至下。
- 可設置padding和margin。
- 寬度沒設置,默認100%。
- 可以容納內聯元素和其他塊元素。
- 行內塊元素
- 不自動換行。
- 可設置寬高。
- 排列從左到右。
- 行內元素,塊級元素,行內塊元素之間的轉換
- display:inline;轉換為行內元素
- display:block;轉換為塊狀元素
- display:inline-block;轉換為行內塊狀元素
行內元素
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 - 定義變量
塊級元素
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 - 非排序列表
caption - 定義表格標題
dd - 定義列表中定義條目
dt - 定義列表中的項目
legend - 為 <fieldset>元素定義標題
li - 定義列表項目
tbody - 標簽表格主體(正文)
td - 表格中的標准單元格
tfoot - 定義表格的頁腳(腳注或表注)
th - 定義表頭單元格
thead - 標簽定義表格的表頭
tr - 定義表格中的行
可變元素
可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。
applet - java applet
button - 按鈕
del - 刪除文本
iframe - inline frame
ins - 插入的文本
map - 圖片區塊(map)
object - object對象
script - 客戶端腳本
總結:
1.塊級元素 block 如 div h1 p ul li等,會換行,想在同一行顯示,需浮動或者display: inline
2.行級元素 inline 如 a span b 多個可以並排顯示,默認設置寬度是不起作用,需設置 display: inline-block或者block才行。