行內元素和塊級元素,一般大家都這嘛說,其實有好多細節呢
。你造嗎?
一、塊級元素和塊元素:
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 定義列表中...