html中區塊級元素和行級元素的比較分析

關於區塊級元素和行內元素（內聯元素的比較）

#兩種元素的比較

區塊級元素：

• 前後有換行

• 可以設定寬高等屬性，以及邊距，參考盒子模型

• 內部可以包含其他區塊級元素，內聯元素

• 寬度預設是父元素的寬度，高度可以設定或由內容的高度決定

內嵌元素：

• 前後不換行

• 設定元素寬高無效，高度由line-height決定（不設定時由font-size計算得出），寬度由內容的多少決定，當寬度大於父元素的寬度時，內聯元素會被折斷到下一行，對於內聯元素可以設置水平方向的padding，margin等，但是對於垂直方向，設置padding，margin看起來就會有效果但是對於瀏覽器來說是沒效果的，不影響其他元素的佈局。

• 不能包含其他元素

• 但是內聯元素中有一些是替換元素（瀏覽器在載入時根據屬性的設定最後確定樣子），可以設定寬高等屬性，例如：img，input

塊級元素和內聯元素的轉換

• display： block/inline-block

• 設定元素浮動

• #設定元素的position：relative/absolute/fixed

#更多html中區塊級元素和行級元素的比較分析相關文章請關注PHP中文網！