行內元素,塊級元素,替換元素和inline-block

行內(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屬性有效

常見的替換元素:

img

input

textarea

select

所以,img,input元素作爲行內元素,但width,height,margin和padding屬性都有效


display:inline-block

通常用來設置非替換元素的行內元素。設置之後,該元素有以下特點:

1.將該對象呈遞爲inline對象,但是對象的內容作爲block對象呈現

2.設置的margin,padding,width和height屬性有效

3.相鄰的inline元素仍在同一行內

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章