好程式設計師web前端學習路線分享CSS浮動-文件流篇

　　好程式設計師web 前端學習路線分享 CSS 浮動 - 文件流篇，純文字的排列，文件流就像我們的文字內容一樣，所有的文字都會緊挨著，一個個排列下來，如果到了邊界，就會換一行排列。當然如果敲回車或者按下空格鍵一般都會認為是一個詞間距，因為英文中每個單詞之間是有距離的，不像中文每個漢字連在一起的。所以不管你敲了幾個回車，不管你敲了幾個空格。程式都認為只有一個詞間距的空格距離。我們把這種現象稱為空白摺疊現象。下圖中的紅色箭頭就是我們敲了回車和敲了空格的效果。

文字和圖片的排列

因為圖文排版的原因，圖片的寬度是一個整體。不像文字可以中間分開，因此在圖文一起的時候我們會發現，圖片作為文件流中的內容也是和一個文字元素一樣，緊挨前一個文字，後面的文字也緊跟著圖片。但是如果一行剩下的位置不夠圖片的寬度，就會自動換一行。

因為圖片和一個文字元素一樣，因此，圖片的高度大於文字的高度，就會把這一行撐高，圖片越高，行越高。在同一行的文字預設就會在圖片的下端。如果你希望文字相對在圖片的中間位置，那麼就需要給圖片設定一個CSS樣式 vertical-align: middle ;注意一定是給圖片設定，不是給文字設定。

　　當然如果我們設定兩個張圖，注意觀察下面的兩張圖中間的縫隙，原因在於<img src=”img/1.jpg”> 之間是換行的。根據上面文字的特徵，這裡必然也會產生一個空格

　　如何解決這個問題呢，起始有很多手段，最簡單的是把兩個標籤連線寫，不要換行

塊元素和行內元素

　　剛才我們所說的都是行內元素，也就是內容新增後會自動放在一行，如果頁面的剩餘的寬度比要放入的元素小，那麼就會自動換行。

　　除了文字和圖片還有一些其他的HTML 標籤也是行內元素。例如 :

　　行內元素

< span>...</ span>行內元素 < a>...</ a>  連結 < br>  換行 < b>...</ b>  加粗 < strong>...</ strong>  加粗 < img  src= "img/1.jpg">  圖片 < sup>...</ sup>  上標 < sub>...</ sub>  下標 < i>...</ i>  斜體 < em>...</ em>  斜體 < del>...</ del>  刪除線 < u>...</ u>  下劃線 < input  type= "text"  title= " 文字 "> 文字框 < textarea  title= " 多行文字 ">...</ textarea>  多行文字 < select  title= " 下拉選單 ">...</ select>  下拉選單

　　

　　上面所有的行內元素，如果直接寫在程式碼中都會存在同一行中。當然換行br 會將後面的元素都放在另外一行了。

　　有時候我們希望一個內容可以自己獨立成行。這樣我們就有了塊元素。塊元素會獨立成行，與行內元素做明顯的區分。

　　例如：

< address></ address>地址文字 < center>...</ center>  居中 < h1>...</ h1>  標題一級 < h2>...</ h2>  標題二級 < h3>...</ h3>  標題三級 < h4>...</ h4>  標題四級 < h5>...</ h5>  標題五級 < h6>...</ h6>  標題六級 < hr>  水平分割線 < p>...</ p>  段落 < pre>...</ pre>  預格式化 < blockquote>...</ blockquote>  段落縮排   前後 5 個字元 < ul>...</ ul>  無序列表 < ol>...</ ol>  有序列表 < dl>...</ dl>  定義列表 < table>...</ table>  表格 < form>...</ form>  表單 < div>...</ div>塊容器

　　塊元素和行內元素具體有哪些區別呢。

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

行內元素和塊元素可以互相轉換的，例如：

(1) 行內元素轉換為塊元素

　　這是預設的行內元素

　　

　　這是轉換後的。我們發現文字塊換行了，而且獨立佔有一行，在這裡我們設定display:block

　　

(2) 塊元素轉換為行內元素

　　這是預設的div 的塊元素樣式

　　

　　設定為行內元素後。我們發現寬高失效了。一旦塊級元素設定為行內元素，原來設定的寬高就會失效

　　

(3) 塊元素和行內元素轉換為行內塊元素

　　有時候我們想讓容器（不是textArea 或者 input ）既有寬高又可以排列在同一行中，我們可以轉換為行內塊容器。尤其是我們希望將多個不同寬高的容器放在同一行中，並且可以透過 margin 調節他們的位置（注意：行內元素不能透過 margin 調節垂直位置，因為他們都是同一行的），這時候行內塊元素就非常有必要了。

　　塊元素變成行內塊元素

　　

　　行內元素變行內塊元素

　　

　　我們發現這兩個效果都是一樣的。

　　大家可能覺得這樣很棒了，我們可以利用圖文混合排列做成網頁了，但是注意我們轉換成了行內塊元素，他們就是在行內了，任何一個更改了marginTop 都會撐開了行高。就會變成這樣：

　　

　　到此為止我們就認識了標準的文件流，如果想在這種標準文件流中排版出複雜的圖文混排，那基本上很難。因此我們就要學習浮動。浮動就是讓容器脫離了這個標準文件流，就像浮動在頁面上一樣。關於這個問題，我們在下一篇中詳細介紹。