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

2022-07-07 05:45:10 字數 1917 閱讀 1459

初學html,接觸很多標籤、、、、等,當寫出簡單的小頁面的時候,例如僅僅是一篇帶有標題的文章,標題標籤單獨一行,不管後面有多大的空間;標籤中使用多個給某些詞做強調,但是卻和中的其他內容同一行,由此,會思考為什麼會有這種的不同?

想要知道為何不同,得先了解html標籤的型別。

html標籤一般分為塊標籤和行內標籤兩種型別,也可以稱為塊元素和行內元素

上面舉例中的標籤就是典型的塊元素,標籤就是乙個行內元素。塊元素和行內元素的具體特點如下:

塊元素會獨自佔據一整行,或者多行,可以任意設定其大小尺寸,是用於搭建網頁布局的必須部分,使網頁結構更加緊湊合理。

塊級元素有以下幾個特點:

總是另起一行(特立獨行)

可以設定其寬度、高度,內外邊距

在不手動設定寬度的情況下,寬度預設為所在容器的100%(即容器寬度)

可以容納行內元素和其他塊元素。

常見的塊級元素有://

/等,其中是最常用最典型的塊級元素。

特殊:文字類的塊級元素不能放塊元素,例如/~/

/*塊元素div*/div

使用以上樣式給下面塊元素div設定

我是塊元素2div>

我是塊元素2div>

效果圖見文末。

行內元素也稱為內聯元素,行內元素不占有獨立區域,其大小僅僅被動的依賴於自身內容的大小(例如文字和),所以一般不能隨意設定其寬高、對齊等屬性。常用於控制頁面中文字的樣式。

行內元素的特點:

總是和相鄰的行內元素在同一行上(物以類聚)

設定寬高無效,水平方向的padding和margin屬性可以設定,但是垂直方向上的無效。

預設寬度是他自身內容的寬度。

行內元素只能容納其他行內元素或者文字。

/*行內元素span*/

span

下面是html樣式

行內元素1span>

行內元素2span>

行內元素3span>

我是行內元素行內元素行內元素4span>

效果圖見文末

普遍的規則裡總有那麼幾個不一樣的,在行內元素中就有那麼幾個特殊標籤,比如

//,可以給他們設定寬高、對齊屬性,我們把這樣特殊的一類標籤稱為行內塊元素。行內塊元素綜合了塊元素和行內元素的不同特點。

行內塊元素的特點:

和相鄰行內元素在同一行,但是之間會有空白縫隙。

預設寬度是他本身內容的寬度。

寬度、高度、行高、外邊距以及內邊距都可以手動設定。

樣式:

/*行內塊元素input*/

input

結構:

綜合效果圖如下:

既然標籤有不同的顯示模式,就會有相應的轉換辦法以應對各種需要。

display正是我們想要的。

塊元素——>行內元素 : display:inline;

行內元素——>塊: display:block;

塊、行內元素——>行內塊: display: inline-block;

總結總結完他們之間的特點更加清晰,記得更牢,首先在以後遇到當給乙個元素設定的寬高無效的時候這就是乙個原因,使用display即可解決。

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

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

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

塊級元素的特點 1 寬度預設是容器的100 2 高度,行高 外邊距以及內邊距都可以控制。3 總是從新行開始 4 可以容納內聯元素和其他塊元素。行內元素的特點 1 預設寬度就是它本身內容的寬度。2 高 寬無效,但水平方向的padding和margin可以設定,垂直方向的無效。3 和相鄰行內元素在一行上...

行內元素 塊級元素和行內塊元素

a 標籤定義鏈結 b 字型加粗 br 換行 i 斜體文字效果 img 在網頁中嵌入 input 輸入框 span 組合文件中的行內元素 small 呈現小號字型效果 big 呈現大號字型效果 sub 定義下標文字 sup 定義上標文字 div 定義文件中的分割槽或節 dl 定義列表 dt 定義列表中...