前端之標籤分類塊標籤和行內標籤

2021-10-10 10:18:20 字數 699 閱讀 7225

#(一)塊級元素

1、塊級元素的特徵*

(1)塊級元素獨佔一行,之後的元素也只能另起一行,相鄰的兩個塊級元素不能共用一行。

(2)塊級元素其元素的高度,寬度,行高和頂部底部邊距都是可以設定的。

(3)元素的寬度如果不設定的話,預設為父元素的寬度。

(4)塊級元素對應的屬性為display:block

**2、常見塊級元素

//定義內容之外的內容.可作為標題的解釋內容或副標題. 不會自動縮排

//音訊標籤//定義較長的引用內容,有首行縮排。

//【繪圖標籤】 。

//定義【**標題】,

//**中的專案描述

//定義文件流中小結,盒子模型標籤 。

//定義列表標籤。

//定義列表中的專案標題

//定義【元素的細節 】

//定義【單中元素的邊框】

//定義figure元素的標題,

//定義媒介內容的分組,以及標題。

//定義section 或page的頁尾

//表單//塊級元素===>行級元素

display:inline

//將行級元素===>塊級元素。

display:block

//將元素設定為塊-行級元素。

display:inline-block

塊級標籤,行內標籤,行內塊標籤

行內元素 塊標籤行內塊標籤 巢狀規則 塊級元素 獨佔一行,對寬高的屬性值生效 如果不給寬度,塊級元素就預設為瀏覽器的寬度,即就是100 寬 行內元素 可以多個標籤存在一行,對寬高屬性值不生效,完全靠內容撐開寬高!行內塊元素 結合的行內和塊級的優點,不僅可以對寬高屬性值生效,還可以多個標籤存在一行顯示...

塊級標籤和行內標籤的測試總結

總結 1.塊級標籤可以設定寬高 width height 和text align 行標籤由內容撐開,不能設定寬高和text align 需要注意 行標籤 單獨使用的 讀者不必了解,沒有實際應用場景 和系列標籤可以設定寬高 並且可以設定text align,系列標籤 除了type為checkbox r...

塊級標籤 行內標籤 和基本巢狀規則

塊級標籤 大標籤 特點 獨佔一行 div 無意義的標籤,一般作為容器 p 段落 h1 h6 h1 h3對搜尋引擎友好 h1 logo 1次 h2 3次 h3 反覆使用 行內標籤 小標籤 特點 左右排列 img alt src title 超連結 a href target blank 在新頁面中開啟...