行內元素和區塊層級元素

標籤：一個   文本   單元   key   轉化   orm   設定   轉換   div   

一.行內元素和區塊層級元素的區別

行內元素：（a,span,i,em,strong,b,label）

• 與其他行內元素並排；
• 不能設定寬、高。預設的寬度，就是文字的寬度。

區塊層級元素：（h1~h6, div, ul, li, ol, dl, dt, dd,form）

• 霸佔一行，不能與其他任何元素並列；
• 能接受寬、高。如果不設定寬度，那麼寬度將預設變為父親的100%。

區塊層級元素和行內元素的分類：

從HTML的角度來講，標籤分為：

• 文本級標籤：p、span、a、b、i、u、em。
• 容器級標籤：div、h系列、li、dt、dd。

　　PS：為什麼說p是文本級標籤呢？因為p裡面只能放文字&圖片&表單元素，p裡面不能放h和ul，p裡面也不能放p。

現在，從CSS的角度講，CSS的分類和上面的很像，就p不一樣：

• 行內元素：除了p之外，所有的文本級標籤，都是行內元素。p是個文本級，但是是個區塊層級元素。

• 區塊層級元素：所有的容器級標籤都是區塊層級元素，還有p標籤。

二.區塊層級元素和行內元素的相互轉換

區塊層級元素轉化為行內元素:

 

一旦，給一個區塊層級元素（比如div）設定：

 

display: inline;

 

那麼，這個標籤將立即變為行內元素，此時它和一個span無異。inline就是“行內”。也就是說：

 

• 此時這個div不能設定寬度、高度；
• 此時這個div可以和別人並排了

行內元素轉換為區塊層級元素：

一旦給一個行內元素（比如span）設定：

display: block;

那麼，這個標籤將立即變為區塊層級元素，此時它和一個div無異。block”是“塊”的意思。也就是說：

• 此時這個span能夠設定寬度、高度
• 此時這個span必須霸佔一行了，別人無法和他並排
• 如果不設定寬度，將撐滿父親

 

行內元素和區塊層級元素