塊級標籤，行內標籤，行內塊標籤

行內元素

塊標籤行內塊標籤

巢狀規則

塊級元素：獨佔一行，對寬高的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；

行內元素：可以多個標籤存在一行，對寬高屬性值不生效，完全靠內容撐開寬高！

行內塊元素：結合的行內和塊級的優點，不僅可以對寬高屬性值生效，還可以多個標籤存在一行顯示；

三者轉換規則

display

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

特點：可以多個標籤存在一行，不能直接設定行內標籤的高度、寬度、行高以及頂和底邊距，完全靠內容撐開寬高！margin和padding設定僅左右方向有效

塊標籤：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form、table以及h5新增的屬性header、section、aside、footer等等。

特點：獨佔一行，對高度、寬度、行高以及頂和底邊距都可設定的屬性值生效；如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬；

行內塊標籤：img,input,textarea

特點：元素排列在一行，不會自動換行，可設定寬度和高度以及外邊距和內邊距的所有樣式。

塊標籤可以套行標籤，行標籤不可以套塊標籤。

p標籤不要套塊屬性標籤，可以套a，span，文字…

在這之前有說過 text-align這個屬性是否生效，原因是塊級標籤如果不給寬度，塊級元素就預設為瀏覽器的寬度，即就是100%寬，那麼在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 在新頁面中開啟...

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

一 塊級元素 1 塊級元素的特徵 1 塊級元素獨佔一行，之後的元素也只能另起一行，相鄰的兩個塊級元素不能共用一行。2 塊級元素其元素的高度，寬度，行高和頂部底部邊距都是可以設定的。3 元素的寬度如果不設定的話，預設為父元素的寬度。4 塊級元素對應的屬性為display block 2 常見塊級元素 ...