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

特點常用元素

display轉換

塊狀元素

1、每個元素佔單獨一行

2、可識別寬高

3、margin：上下左右有效

4、padding：上下左右有效

div p section ul-li header

footer

block

行內元素

1、每個元素預設從左到右排列，不單獨占行

2、對寬高屬性無效

3、margin：上下無效，左右有效

4、padding：上下左右有效

span i lable strong img

inline

行內塊狀元素

1、每個元素預設從左到右排列，不單獨占行

2、可識別寬高

3、margin：上下左右有效

4、padding：上下左右有效

inline-block

塊狀元素12

3 行內元素12
3 行內塊狀元素12
3 塊狀元素 (padding: 1rem ; margin: 1rem)12
3 行內元素 (padding: 1rem ; margin: 1rem)12
3 行內塊狀元素 (padding: 1rem ; margin: 1rem)12
3 

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

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

內聯元素（行內元素），塊狀元素，行內塊狀元素的區別

html 元素指的是從開始標籤到結束標籤的所有 元素的分類方式分為行內元素 塊狀元素和行內塊狀元素三種，這三者可以通過設定display屬性值實現相互轉化。1 display inline 轉換為行內元素 2 display block 轉換為塊狀元素 3 display inline block ...

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

html元素可以分成行內元素 塊狀元素和行內塊元素。1 display inline 轉換為行內元素 2 display block 轉換為塊狀元素 3 display inline block 轉換為行內塊狀元素 行內元素的特徵 1 設定寬高無效 2 對margin僅設定左右方向有效，上下無效 p...