HTML行內元素 塊級元素 行內塊級

2021-10-23 17:32:27 字數 2162 閱讀 4212

html標籤按照元素種類可以分為行內元素(display: inline);,塊級元素(display:block)和行內塊級元素(display:inline-block)三種。了解元素種類有利於,我們進行css布局及屬性的使用。

也叫內聯元素或內嵌元素,只能容納文字或其他內聯元素。

預設特點:

示例:

關關雎鳩

所謂伊人

在水一方

在河之洲

效果:

常見行內元素:

標籤意義a錨點

abbr

縮寫acronym首字b

粗體(不推薦)

big大字型

br換行

cite

引用code

**dfn

定義字段

em強調

font

字型設定(不推薦)i斜體

imginput

輸入框kbd

定義鍵盤文字

label

**標籤

q短引用

s中劃線(不推薦)

samp

定義範例計算機**

select

專案選擇

small

小字型文字

span

定義文字內區塊(常用)

strike

中劃線strong

粗體強調

sub下標

sup上標

textarea

多行文字輸入框

tt電傳文字

u下劃線

塊級元素一般可巢狀塊級元素或行內元素

預設特點:

示例:

關關雎鳩

在河之洲

窈窕淑女

君子好逑

效果:

常見的塊級元素:

標籤意義

address

位址blockquote

塊引用center

局中對齊塊

dir目錄列表

div常用塊級容易(常用)

dl定義列表

fieldset

form控制組

form

互動表單

h1大標題

h2副標題

h3**標題

h4四級標題

h5物級標題

h6六級標題

hr水平分隔線

menu

選單列表

noframes

frames可選內容

noscript

可選指令碼內容

ol有序表單p段落

pre格式化文字

table

** (display:table)

ul無序列表

既有行內元素的一些特性又有塊級元素的一些特性。

預設特點:

常見行內塊級元素:

標籤意義

button

按鈕input

輸入框img

iframe

框架textarea

多行文字框

select

選項三種元素都可通過css改變display屬性切換元素型別

行內元素與塊級元素對比:

行內元素

塊級元素

排在一行

獨佔一行

寬度隨內容變化

容器的100%

height,width無效

height,width有效

padding,margin水平有效,垂直無效

padding,margin水平,垂直均有效

display:inlinedispaly: block

塊級元素,行內元素,行內塊元素

內聯元素 行內元素 內聯元素 inline element 行內塊元素 a 錨點 abbr 縮寫 acronym 首字 b 粗體 不推薦 bdo bidi override big 大字型 br 換行 cite 引用 code 計算機 在引用原始碼的時候需要 dfn 定義字段 em 強調 font ...

塊級元素,行內元素,行內塊元素

獨佔一行,對寬高的屬性值生效 如果不給寬度,預設為瀏覽器的寬度即100 塊標籤 p div ul ol li dl dt dd h1 h6 form 可以多個標籤存在一行,對寬高的屬性值不生效,靠內容撐開 行內標籤 a span em strong b i u label br 結合行內和塊級元素的...

CSS塊級元素 行內元素 行內塊級元素

塊級元素 根據css規範的規定,每乙個網頁元素都有乙個display屬性,用於確定該元素的型別,每乙個元素都有預設的display屬性值,比如div元素,它的預設display屬性值為 block 成為塊級元素 display block 常見塊級元素 div p ul ol li 等 1 每個塊級...