HTML行內元素 塊狀元素 行內塊狀元素的區別

2021-10-21 12:01:26 字數 453 閱讀 5884

html元素可以分成行內元素、塊狀元素和行內塊元素。

(1)display:inline;轉換為行內元素

(2)display:block;轉換為塊狀元素

(3)display:inline-block;轉換為行內塊狀元素

行內元素的特徵:

(1)設定寬高無效

(2)對margin僅設定左右方向有效,上下無效;padding設定上下左右都有效,即會撐大空間

(3)不會自動進行換行

塊元素:

(1)能夠識別寬高

(2)margin和padding的上下左右均對其有效

(3)可以自動換行

(4)多個塊狀元素標籤寫在一起,預設排列方式為從上至下

HTML塊狀元素 行內元素 行內塊狀元素學習筆記

特點常用元素 display轉換 塊狀元素 1 每個元素佔單獨一行 2 可識別寬高 3 margin 上下左右有效 4 padding 上下左右有效 div p section ul li header footer block 行內元素 1 每個元素預設從左到右排列,不單獨占行 2 對寬高屬性無效...

行內元素 塊狀元素 行內塊狀元素

頁面元素主要分為三類 塊元素 行內元素,行內塊元素。三者可以通過display進行相互轉換 display block 塊元素 display inline 行內元素 display inline block 行內塊元素 1 塊元素 塊狀元素代表性的就是div,其他如p h1 h6 ul ol dl...

HTML行內元素 塊狀元素 行內塊狀元素的區別

html可以將元素分類方式分為行內元素 塊狀元素和行內塊狀元素三種。首先需要說明的是,這三者是可以互相轉換的,使用display屬性能夠將三者任意轉換 1 display inline 轉換為行內元素 2 display block 轉換為塊狀元素 3 display inline block 轉換...