常用的行內元素和塊級元素以及他們有什麼區別

2021-10-21 14:18:54 字數 887 閱讀 4784

常用行內元素列表:

標籤可定義鏈結

字型加粗

換行輸入框定義變數

塊級元素列表:

定義文件中的分割槽或節

建立 html 表單

建立一條水平線

定義有序列表

定義無序列表

標籤定義段落

一,從概念的角度解釋塊級元素和行內元素

1. 塊級元素,一般都是從新行開始,它可以容納行內元素和其他塊元素,常見塊級元素比如div/p等。「form」這個快元素比較特殊,他只能來容納其他塊元素

2. 行內元素:也叫做內聯元素,一般都是語義級別的基本元素,內聯元素已辦只能容納文字或者其他內聯元素。

塊元素(block element)和內聯元素(inline element)都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都是從新行開始的。

而當加了css控制以後,塊元素可以變為內聯元素,內聯元素也可以變為塊元素。

二,塊級元素和內聯元素的區別

1. 塊級元素會獨佔一行,其寬度自動填滿其父元素寬度

行內元素不會獨佔一行,相鄰的行內元素會排列到同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容變化而變化,

2. 一般情況下,塊級元素可以設定width,height屬性,行內元素設定width,height無效

(注意,塊級元素設定了width寬度屬性後仍然是獨佔一行的)

3. 塊級元素可以設定margin,padding屬性

行內元素的水平方向的padding-left和padding-right都會產生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果

行內元素 塊級元素以及行內塊元素的區別

a strong b em i span u s del ins 天生自帶屬性display inline,通常用來進行文字 加粗,斜體,鏈結 小圖示 小結構 的搭建 不獨佔一行,從左到右依次排列 排列到超出父元素的寬度會自動折行 設定寬高屬性以及margin和padding的上下不起作用,需要加d...

常用的塊級元素 行內元素以及行內塊元素的解析

一.塊級元素 不廢話,直接上圖 div p h1 h6 ul ol dl li dd table hr blockquote address table menu pre,html5新增的header section aside footer等 從瀏覽器的顯示結果可以看出,塊級元素新開啟一行 即使是...

行內元素和塊元素以及行內塊元素的特點

初學html,接觸很多標籤 等,當寫出簡單的小頁面的時候,例如僅僅是一篇帶有標題的文章,標題標籤單獨一行,不管後面有多大的空間 標籤中使用多個給某些詞做強調,但是卻和中的其他內容同一行,由此,會思考為什麼和會有這種的不同?想要知道為何不同,得先了解html標籤的型別。html標籤一般分為塊標籤和行內...