靜態頁面製作:8HTML浮動騰挪概念(鋪墊二:圖文混排)

標籤：沒有   標識   img   基礎   例子   https   line   graph   html   

現在那我們來說說第二個鋪墊。

第二個鋪墊叫做圖文混排。什麼是圖文混排呢，這個東西我們還需要花些時間來分析一下的。首先看：

其實就是一個例子，然而這個例子其實在我們瀏覽網頁，或者看一些微博、部落格等文章時，我們發現這種格式很常見。這種有內容、有圖片並且又在一個地區中，這種情況我們就叫做圖文混排。

既然說到圖文混排，現在文字我們已經接觸過了，但是圖片該怎麼弄還沒說。我們現在就說說這個圖片怎麼弄？如果說你想讓瀏覽器中有圖片的話，那你就需要加一個<img>，其實全拼就是image，圖片的意思。img是一個單標籤，它是行內元素，如果唯寫單標籤其實是沒有實際含義的。因為瀏覽器根本不知道你要顯示那張圖片。所以我們需要為img添加一個src這麼一個屬性，src其實就是source的縮寫，指的是源頭。通過這個屬性就可以指定圖片源在哪裡。

這裡我們可以通過<img src=“圖片名稱”>這種引用，就可以把圖片放到瀏覽器裡了，那麼關於圖片的相關知識，我們就說到這，後面我們在詳細說。

我們在p標籤中寫一段文字，就達到了的一個效果。由於p標籤是一個塊元素，所以是不會和圖片在一行的，那更別提混合在一起了。根據我們現在所學的內容，我們想要達到混合在一塊的效果，那就是給p標籤添加樣式。

當我們給p標籤添加樣式之後，會按照基準排列文字，基準也就是圖片的底端的部分，所以文字在書寫的時候，會從底端開始排列文字。並不會從圖片的頂端開始書寫。那我們可能會想到在方法一種我們使用了一個叫做vertical-aling:top的。

由於圖片他本身是一個行內元素，所以無論如何他也只能和一行文字擺在一起，你想跟多行在一塊顯示，那不可能，如果那樣圖片就不是行內元素了，行內元素只能在一行顯示，那麼其他的文字就得從圖片底端下面進行展示，這樣的效果並不是我們想要的。

我們需要一個真正的圖文混排，圖片不能局限於某一行，但我們又需要遵循block和inline的原則。

那麼我們就需要開闢新戰場！

那麼開闢什麼心戰場又是我們需要解決的一個問題，我們需要通過三維的角度去觀察，其實我們剛剛所看到的效果都知識三維中的一層。

但是三維中的一層，並不能滿足我們的要求，那我們需要像個辦法，什麼辦法呢，就是讓這張圖片在文字的基礎上浮動起來，我們來看看效果。

讓圖片不在受一層行的局限，讓圖片飄起來。浮動起來之後，我們發現，一層就留下了空擋。

我們使用深紅色來標識出來，流出空擋的這部分，那麼有了空擋之後會發生什麼事情呢，這裡會發生兩件事情。

第一件事是：塊元素會填充空擋。

第二件事是：行內元素會繞著浮動元素的邊框走。

我們對這兩件事進行解釋。首先我們說塊元素填充空擋。那會達到一個什麼樣的效果呢？

發現此時背景綠色的p標籤填充到圖片留下來的空擋中了。那麼第二件事就是行內元素環繞浮動元素邊框。這個好像有點不太好理解，我們在來解釋一下。大家可能會想，此時的圖片已經飄起來了，那麼p標籤只需要佔滿整行就好了，那有什麼行內元素環繞浮動元素邊框啊。我們現在來回想一下之前說的鋪墊一。p標籤是塊元素，但是文字是行元素。所以我們說的行內元素環繞浮動元素，意思就是圖片中的文字會繞開圖片的地區。就變成了這個樣子。

其實這樣的效果就是我們想要的了，這裡我們寫的文字比較少。如果多寫幾行就會環繞圖片進行排列。例如這樣！

從平面的角度看，這個就是我們需要的圖文混排了。在這裡我們整理一下我們這節課所涉及到的知識點。

這節內容我們主要涉及到兩個方面：

1.我們說文字是行內元素。所以在標籤中的內容，通屬於文字類型。那麼標籤與文字實際上是嵌套關係。

2.我們瞭解了圖文混排，由於圖片是行內元素，當圖片和文字混在一起的時候，只有圖片的最頂端有文字，當然這裡我們使用了vertical-align：top; 如果我們想要達到行內文字元素環繞浮動元素，就需要將圖片漂浮起來，騰出來的空擋由行內元素填充，就可以達到真正意義上的圖文混排。

以上就是我們這節主要涉及的內容，下一節我們將浮動騰挪應用於代碼中。

靜態頁面製作:8HTML浮動騰挪概念(鋪墊二:圖文混排)