塊級元素與行內元素

2021-07-23 15:07:18 字數 2240 閱讀 2924

用法:

塊級元素只能用於標籤中

塊級元素與行內元素

塊級元素與行內元素的幾個區別

格式:在預設情況下,塊級元素會從新起一行

內容模型:

塊級元素可以包含其他的塊級元素和行內元素,這種模型會比行內元素有著更加大的結構

塊級元素列表:

1. ---****資訊

2.

---塊引用

3. ---定義列表中的條目描述

4. ---文件分割槽

5. ---定義列表

6. ---表單元素分組

7.---form表單

8.

---塊引用

9. ---大標題

10.---副標題

11.---定義標題

12. ---定義標題

13. ---定義標題

14. ---最小標題

15. ---水平分割線

16.---不支援指令碼或禁用指令碼

17. ---有序列表

18.

---行

19.

---預格式化文字

20. ---**

21. ---表腳注

22. ---無序列表

html5新增

塊級元素:

23. ---文章內容

24. < aside> ---伴隨內容

26. ---繪製圖形

27. ---**資訊組

28. < figcaption> ---**資訊組標題

29. ---區段尾或頁尾

30. ---區段頭或頁頭

31. ---標題組

32. < output> ---表單輸出

33. ---乙個頁面區段

行內元素與塊級元素的區別

內容:

通常情況下,行內元素只能包含資料或其它行內元素

格式:預設情況下,行內元素不會重新起一行,而塊級元素會重新起一行

行內元素列表:

1.--- a標籤元素

2.---表示乙個縮寫形式

3.---定義只取首字母縮寫

4.---字型加粗

5.---可覆蓋的文字方向

6.---大號字型加粗 7.

---換行

8.---引用進行定義

9.---定義計算機**文字

10.---定義乙個定義專案

11.---定義為強調內容

12.---斜體文字效果

13.14.---文字輸入框

15.---定義鍵盤文字

16.---標籤為input 元素定義標註(標記)

17.---定義短的引用

18.---定義樣本文字

19.---下拉列表選單

20.---顯示小號字型效果

31.---組合文字中的行內元素

32.---加粗

33.---定義下標文字

34.---定義上標文字

35.---多行文字輸入控制項

36.---打字機或者等寬的文字效果

37.---定義變數

可變元素

可變元素為根據上下文語境決定該元素是塊級元素或內聯元素

2.button --- 按鈕

3.del  --- 刪除文字

4.iframe --- inline frame

5.ins  --- 插入文字

6.map --- 區塊

7.object  --- object物件

8.script --- 客戶端指令碼

總結:

區別:

1、塊級元素會獨佔一行,其寬度會自動填滿父級元素的寬度

行內元素不會獨佔一行,相鄰間的行內元素會拍到一行內,直到一行的內容排滿才會自動換行,寬度會隨內容的變化而變化

變化:2、塊級元素可以設定width與height;而行內元素設定了width和height會沒有效果

注:塊級元素雖然設定了,但其還會獨佔一行

3、塊級元素可以設定margin與padding,可是行內元素設定了,只有水平方向上有效果、垂直方向上沒有效果

就是說行內元素設定margin-left;margin-right;padding-left;padding-right;有效果;而設定margin-top;margin-bottom;padding-top;padding-bottom;沒有效果

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

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

行內元素與塊級元素

1.行內元素與塊級元素直觀上的區別 行內元素會在一條直線上排列,都是同一行的,水平方向排列 塊級元素各佔據一行,垂直方向排列。塊級元素從新行開始結束接著乙個斷行。2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素。3.行內元素與塊級元素屬性的不同,主要是盒模型屬性上 行內元素設定wid...

塊級元素與行內元素

1 塊級元素與行內元素分別有哪些?塊級元素 div,p,form,ul,li ol,dl,dt,dd,address,fieldset,hr,menu,table等。行內元素 span,strong,em,br,img input,label,select,textarea,i,a等。2 區別 1 ...