學習的初期，我們就要知道，標準文檔流等級森嚴。標簽分為兩種等級：

• 行內元素
• 塊級元素

比如h1標簽和span，同時設置寬高，來看瀏覽器效果，那麽你會發現：

行內元素和塊級元素的區別：（非常重要）

行內元素：

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

塊級元素：

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

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

在以前的HTML知識中，我們已經將標簽分過類，當時分為了：文本級、容器級。

從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標簽。

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

我們可以通過display屬性將塊級元素和行內元素進行相互轉換。display即“顯示模式”。

塊級元素可以轉換為行內元素：

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

display: inline;

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

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

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

同樣的道理，一旦給一個行內元素（比如span）設置：

display: block;

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

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

標準流裏面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要並排、並且就要設置寬高，那該怎麽辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

• （1）浮動
• （2）絕對定位
• （3）固定定位

14-塊級元素和行內元素