首頁 > web前端 > css教學 > 主體

行內元素與區塊級元素有什麼區別

王林
發布: 2020-05-07 09:15:28
轉載
5031 人瀏覽過

行內元素與區塊級元素有什麼區別

區塊級元素

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中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!