塊級元素和行內元素

塊級元素和行內元素

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

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

行內元素：

與其他行內元素並排

不能設定寬高，預設的寬度就是文字的寬度

塊級元素：

霸佔一行，不能與其他任何元素並列。

能接受寬高，如果不設定寬度，那麼寬度將預設變為父級的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，如果不設定寬度，將佔滿父級。

感謝

萬能的網路

以及勤勞的自己，個人部落格，GitHub