塊狀元素和行內元素

標籤分爲兩種等級:

1,行內元素。2,塊級元素。

行內元素和塊級元素的區別:

  1. 行內元素:
  • . 與其他行內元素並排
  • 不能設置寬高,默認的寬度就是文字的寬度
  1. 塊級元素:
  • 霸佔一行,不能與其他任何元素並列。
  • 能接受寬高,如果不設置寬度,那麼寬度將默認變爲父級的100%。

塊級元素和行內元素的分類:

在HTML的角度來講,標籤分爲:

文本級標籤:

p , span , a , b , i , u , em

容器級標籤:
    div , h系列 , li , dt ,dd

p:裏面只能放文字和圖片和表單元素,p裏面不能放h和ul,也不能放p。

從CSS的角度講,CSS的分類和上面的很像,就p不一樣:

行內元素:除了p之外,所有的文本級標籤,都是行內元素。p是個文本級標籤,但是是個塊級元素。

塊級元素:所有的容器級標籤,都是塊級元素,以及p標籤

塊級元素和行內元素的相互轉換:

我們可以通過display屬性將塊級元素(比如div)和行內元素進行相互轉換。

display:inline;

那麼這個標籤將變爲行內元素,即:

1,此時這個div將不能設置寬度和高度了。

2,此時這個div可以和其他行內元素並排了。

同樣的到了我們也可以用display將行內元素(比如span)轉行成塊級元素。

display:block;

那麼這個span標籤將變爲塊級標籤,即:

1,此時這個span能夠設置寬度,高度。

2,此時這個span必須獨佔一行,其他元素無法與之並排。

3,如果不設置寬度,將佔滿父級。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章