一、行內元素
一個行內元素只佔據它對應標籤的邊框所包含的空間。
二、塊級元素
塊級元素佔據其父元素(容器)的整個空間,因此創建了一個“塊”。通常瀏覽器會在塊級元素前後另起一個新行。
三、行內元素示例
HTML
CSS
Example
四、塊級元素示例
HTML
CSS
Example
五、行內元素的特點
5.1 和其他元素都在同一行上
5.2 高,行高及外邊距和內邊距不可改變
5.3 寬度就是它的文字或圖片的寬度,不可改變
5.4 行內元素只能容納文本或者其他行內元素
5.5 設置行內元素,需要注意如下
(1)設置寬度 width 無效。
(2)設置高度 height 無效,但可以通過 line-height 來設置。
(3)設置 margin 只有 左右有效,上下無效。
(4)設置 padding 只有 左右有效,上下無效。注意元素範圍是增大了,但是對元素周圍的內容是沒影響的。
六、塊級元素的特點
6.1 總是在新一行開始
6.2 高度,行高以及外邊距和內邊距都可改變
6.3 若寬度沒有設置,則默認寬度爲容器的100%,除非設定一個寬度
6.4 塊級元素可以容納行內元素和其他塊級元素
七、行內元素和塊級元素對比
7.1 內容
(1)一般情況下,行內元素只能包含數據和其他行內元素。
(2)而塊級元素可以包含行內元素和其他塊級元素。這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。
7.2 格式
默認情況下,行內元素不會以新行開始,而塊級元素會新起一行。
7.3 寬高
(1)行內元素不可以設置寬高
(2)塊級元素可以設置寬高
7.4 內邊距和外邊距
(1)行內元素水平方向的 margin 和 padding 可以生效。但豎直方向的 margin 和 padding 不能生效。
(2)塊級元素可以設置margin,padding
八、行內元素列表
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 | 下劃線 |
九、塊級元素列表
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 | 無序列表 |
十、可變元素
可變元素爲根據上下文語境決定該元素爲行內元素或者塊級元素。
applet | java applet |
button | 按鈕 |
del | 刪除文本 |
iframe | inline frame |
ins | 插入的文本 |
map | 圖片區塊(map) |
object | object對象 |
script | 客戶端腳本 |
十一、行內元素和塊級元素的轉換
11.1 display
(1)行內元素 display:inline
(2)塊級元素 display:block
(3)行內塊元素 display:inline-block
(4)行內元素轉換塊級元素 display:block
(5)塊級元素轉換行內元素 display:inline
11.2 float
若設置行內元素 float:left/right,則該行內元素轉換爲塊級元素 ,且具有浮動特性。
11.3 position
若爲行內元素進行定位,position:absolute 或者 position:fixed 都會把行內元素轉換爲塊級元素。