html中的行內元素和塊級元素的總結

2021-10-14 07:41:58 字數 819 閱讀 8693

元素分類

特點(區別)

塊級元素

元素(標籤)執行在頁面時,會自動換行,呈豎排顯示

行內元素

元素(標籤)執行在頁面時,不自動換行,呈橫排顯示

元素分類

元素(標籤舉例)

塊級元素

div、ul、li、dl、dt、dd、p、h1-h6、blockquote

行內元素

a、b、span、img、input、strong、select、label、em、button、textarea

下面咱們用**來具體表現塊級元素和行內元素的區別

(就分別拿h1標籤和span標籤 來做示範吧!)

<

!--塊級元素示範:將兩個塊級元素 h1標籤放在同一行--

>

/h1>

/h1>

<

!--行內元素示範:將兩個行內元素 span標籤放在不同行--

>

hello<

/span>

world!

<

/span>

網頁上呈現的執行結果:兩個塊級元素h1標籤中的「你」、「好」是自動換行的 (即使在html中兩個h1標籤是在同一行)兩個行內元素span標籤中的「hello」、「world!」 沒有自動換行(即使在html中兩個span標籤不同行)

HTML 塊級元素和行內元素

行內內容是說由行內元素組成的內容,行內元素大家都知道吧,比如 span 元素,iframe元素和元素樣式的display inline的都是行內元素。例如文字這類元素,各個字母 之間橫向排列,到最右端自動折行。塊級內容跟則是由塊級元素構成,div 是最常用的塊級元素,元素樣式的display blo...

html塊級元素和行內元素

塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元素擺放到你想要 的位置上去。而不...

html 行內元素和塊級元素

行內元素一般是內容的容器,而塊級元素一般是其他容器的容器。一般情況下,行內元素只能包含內容或者其它行內元素,寬度和長度依據內容而定,不可以設定,可以和其它元素和平共處於一行 而塊級元素可以包含行內元素和其它塊級元素,且佔據父元素的整個空間,可以設定 width 和 height 屬性,瀏覽器通常會在...