區塊級元素
1、總是從新行開始
2、高度、行高、外邊距以及內邊距都可以控制
3、寬度預設是瀏覽器的100%
4、可以容納內聯元素以及其他區塊元素
行內元素
1、和相鄰元素在一行上
2、高、寬無效,但是水平方向的padding和margin可以設置,垂直方向無效
3、預設寬度就是它本身內容的寬度
4、行內元素只能容納文字或其他行內元素(a除外)
(影片教學建議:css影片教學)
注意:
1、只有文字才能組成段落,因此p裡面不能放置區塊元素,同理還有這些標籤h1 -h6,dt等,它們都是文字區塊級標籤,裡面不能放置其他區塊級元素
2、連結裡面不能再放置連結
區塊級元素和行內元素的差異
區塊級元素的特徵:
1、總是從新行開始
2、高度、行高、外邊距以及內邊距都可以控制
3、寬度預設是瀏覽器的100%
4、可以容納內聯元素以及其他區塊元素
行內元素的特徵:
1、和相鄰行內元素在一行上
2、高、寬無效,但是水平方向的padding和margin可以設定,垂直方向無效
3、預設寬度就是它本身內容的寬度
4、行內元素只能容納文字或其他行內元素(a除外)
行內區塊標籤inline-block
在行內元素中有幾個特殊的標籤--、、
特點:
1、和相鄰行內元素(行內部)在一行上,但是之間會有空白間隙;
2 、預設寬度是它本身內容的寬度
3、高度、行高、外邊距以及內邊距都可以控制
標籤顯示模式轉換display
區塊轉行內:display:inline;
行內轉區塊:display:block;
區塊、行內元素轉換為行內區塊:display:inline-block;
推薦教學:css快速入門
以上是行內元素與區塊級元素有什麼區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!