標籤分爲兩種等級:
1,行內元素。2,塊級元素。
行內元素和塊級元素的區別:
- 行內元素:
- . 與其他行內元素並排
- 不能設置寬高,默認的寬度就是文字的寬度
- 塊級元素:
- 霸佔一行,不能與其他任何元素並列。
- 能接受寬高,如果不設置寬度,那麼寬度將默認變爲父級的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,如果不設置寬度,將佔滿父級。