行內元素和塊級元素的具體區別與行內塊元素

2022-08-23 12:09:07 字數 496 閱讀 7462

簡單描述

行內元素(inline)和塊級元素(block)都是display屬性的值。要知道行內元素和塊級元素的區別,首先要了解他們的特性。

行內元素的特性:「行內」,顧名思義,在一行之內,所以相鄰的行內元素在同一行,當他們寬度超過了容器的寬度才會自動換行。行內元素的寬度、高度、內邊距的 top/bottom和外邊距的top/bottom都是不可改變的,但 padding 和 margin 的 left 和 right 是可以設定的。常見的行內元素有:span、a、br。。。

塊級元素的特性:總是獨佔一行,表現為另起一行開始,即其後的元素也必須另起一行顯示,他們的寬度、高度、內邊距和外邊距都可控制。常見的塊級元素有:table、form、ul li。。。

行內塊元素(inline-block):即融合了行內元素和塊級元素的特性,即在一行顯示,又能設定寬高。常見的行內塊元素有:img、input、button。。。

這些元素之間是可以通過設定display屬性來進行轉換的。

擴充套件學習

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

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

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

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

塊級元素與行內元素區別

1.塊級元素 特性 佔一行顯示,可以設定寬度和高度 屬性 描述 位址長的引用 標題 列表中定義條目 劃分區域 定義列表 列表中專案 框架集表單 標題 一級到六級 一條水平線 為fieldset元素定義標題 列表給不支援框架的瀏覽器顯示文字,frameset元素內部 在指令碼未被執行時的替代內容 有序...