行內元素和塊級元素詳解

2022-01-31 18:16:03 字數 1209 閱讀 4227

行內元素和塊級元素,一般大家都這嘛說,其實有好多細節呢

。你造嗎?

一、塊級元素和塊元素:

1.塊級元素是那些視覺上會被格式化成塊狀的元素,通俗一點來說就是那些會換新行的元素。display屬性的:block,list-item,table,flex,grid值都可以將乙個元素設定成塊級元素 

2.塊元素是display屬性值為block的元素,它應該是塊級元素的乙個子集,而不是等同的,乙個塊元素是乙個塊級元素,但乙個塊級元素不一定是乙個塊元素

3.怎嘛說呢,比方說某元素是是行內屬性,你新增display:block;就是塊元素,但是像不需要新增display:inline;就可以換行,就叫做塊級元素;

二、行內元素和行內級元素:

1.行內級元素是那些不會為自身內容形成新的塊。display屬性的:inline,inline-table,inline-block,inline-flex,inline-grid值都可以將乙個元素設定成行內級元素。

2.如同塊元素之於塊級元素的關係,行內元素僅僅是display屬性值為inline的元素。

三、下邊列舉一些具體標籤是行內級元素還是塊級元素:

行內級元素:

塊級元素:

四、下邊說下置換元素:置換元素就歸為行內級元素吧

1.乙個內容不受css視覺格式化模型控制,css渲染模型並不考慮對此內容的渲染,且元素本身一般擁有固有尺寸(寬度,高度,寬高比)的元素,被稱之為置換元素。

2.w3c並沒有給出明確的非置換元素的解釋,但能確定的是除置換元素之外,所有的元素都是非置換元素。

3.其實置換元素就是不換行,但是擁有寬,高。類似於inline-block屬性。

常見置換元素:

、、、、

置換元素的高度的設定需遵循以下幾點:

其它型別的置換元素,其高度的定義都參照行內置換元素的定義。

文章參考:

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

而標籤的屬性是可以轉換的 display inline 轉換為行內元素 display linline block 轉換為行內塊元素 display block 轉換為塊級元素。行內元素 無法設定寬高 margin和padding上下無效,只有左右有效果 總是和相鄰的行內元素在同一行上,預設排列方式...

行內元素和塊級元素詳解

在標準文件流裡面,塊級元素具有以下特點 1 總是在新行上開始,佔據一整行 2 高度,行高以及外邊距和內邊距都可控制 3 寬頻始終是與瀏覽器寬度一樣,與內容無關 4 它可以容納內聯元素和其他塊元素。5 浮動後的元素相當於inline block.行內元素的特點 和其他元素都在一行上 高,行高及外邊距和...

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

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