1、純文本的排列。

文檔流就像我們的文本內(nèi)容一樣，所有的文字都會緊挨著，一個個排列下來，如果到了邊界，就會換一行排列。當(dāng)然如果敲回車或者按下空格鍵一般都會認(rèn)為是一個詞間距，因為英文中每個單詞之間是有距離的，不像中文每個漢字連在一起的。所以不管你敲了幾個回車，不管你敲了幾個空格。程序都認(rèn)為只有一個詞間距的空格距離。我們把這種現(xiàn)象稱為空白折疊現(xiàn)象。下圖中的紅色箭頭就是我們敲了回車和敲了空格的效果。

2、文本和圖片的排列

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

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

當(dāng)然如果我們設(shè)置兩個張圖，注意觀察下面的兩張圖中間的縫隙，原因在于之間是換行的。根據(jù)上面文字的特征，這里必然也會產(chǎn)生一個空格

如何解決這個問題呢，起始有很多手段，最簡單的是把兩個標(biāo)簽連接寫，不要換行

3、塊元素和行內(nèi)元素

剛才我們所說的都是行內(nèi)元素，也就是內(nèi)容添加后會自動放在一行，如果頁面的剩余的寬度比要放入的元素小，那么就會自動換行。

除了文本和圖片還有一些其他的HTML標(biāo)簽也是行內(nèi)元素。例如:

行內(nèi)元素

<span>...span>行內(nèi)元素

<a>...a> 鏈接

<br> 換行

<b>...b> 加粗

<strong>...strong> 加粗

<img src="img/1.jpg"> 圖片

<sup>...sup> 上標(biāo)

<sub>...sub> 下標(biāo)

<i>...i> 斜體

<em>...em> 斜體

<del>...del> 刪除線

<u>...u> 下劃線

<input type="text" > 文本框

<textarea >...textarea> 多行文本

<select >...select> 下拉列表

上面所有的行內(nèi)元素，如果直接寫在代碼中都會存在同一行中。當(dāng)然換行br會將后面的元素都放在另外一行了。

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

例如：

<address>address>地址文字

<center>...center> 居中

<h1>...h1> 標(biāo)題一級

<h2>...h2> 標(biāo)題二級

<h3>...h3> 標(biāo)題三級

<h4>...h4> 標(biāo)題四級

<h5>...h5> 標(biāo)題五級

<h6>...h6> 標(biāo)題六級

<hr> 水平分割線

<p>...p> 段落

<pre>...pre> 預(yù)格式化

<blockquote>...blockquote> 段落縮進 前后5個字符

<ul>...ul> 無序列表

<ol>...ol> 有序列表

<dl>...dl> 定義列表

<table>...table> 表格

<form>...form> 表單

<div>...div>塊容器

塊元素和行內(nèi)元素具體有哪些區(qū)別呢。

行內(nèi)元素

塊元素

同行

輸入行內(nèi)元素，就會自動同行

輸入塊級元素，自動換行，并且獨立占有一行，其它行內(nèi)元素不會和它同行的。

設(shè)置寬高

行內(nèi)元素部分內(nèi)容是不可以設(shè)置寬高的，例如span容器,a超鏈接標(biāo)簽等等，當(dāng)然有些還是可以通過CSS樣式更改寬高的，例如input，img,textarea等非文字的標(biāo)簽

塊元素直接可以設(shè)置寬高，如果沒有設(shè)置就會根據(jù)該元素的父級容器的寬自動設(shè)置100%，高度是根據(jù)內(nèi)容撐開的，如果沒有內(nèi)容，塊元素默認(rèn)高度是0，這點很重要。

4、行內(nèi)元素和塊元素的互相轉(zhuǎn)換

行內(nèi)元素和塊元素可以互相轉(zhuǎn)換的，例如：

(1) 行內(nèi)元素轉(zhuǎn)換為塊元素

這是默認(rèn)的行內(nèi)元素

這是轉(zhuǎn)換后的。我們發(fā)現(xiàn)文字塊換行了，而且獨立占有一行，在這里我們設(shè)置display:block

(2) 塊元素轉(zhuǎn)換為行內(nèi)元素

這是默認(rèn)的div的塊元素樣式

設(shè)置為行內(nèi)元素后。我們發(fā)現(xiàn)寬高失效了。一旦塊級元素設(shè)置為行內(nèi)元素，原來設(shè)置的寬高就會失效

(3) 塊元素和行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素

有時候我們想讓容器(不是textArea或者input)既有寬高又可以排列在同一行中，我們可以轉(zhuǎn)換為行內(nèi)塊容器。尤其是我們希望將多個不同寬高的容器放在同一行中，并且可以通過margin調(diào)節(jié)他們的位置(注意：行內(nèi)元素不能通過margin調(diào)節(jié)垂直位置，因為他們都是同一行的)，這時候行內(nèi)塊元素就非常有必要了。

塊元素變成行內(nèi)塊元素

行內(nèi)元素變行內(nèi)塊元素

我們發(fā)現(xiàn)這兩個效果都是一樣的。

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

到此為止我們就認(rèn)識了標(biāo)準(zhǔn)的文檔流，如果想在這種標(biāo)準(zhǔn)文檔流中排版出復(fù)雜的圖文混排，那基本上很難。因此我們就要學(xué)習(xí)浮動。浮動就是讓容器脫離了這個標(biāo)準(zhǔn)文檔流，就像浮動在頁面上一樣。關(guān)于這個問題，我們在下一篇中詳細(xì)介紹。

總結(jié)

以上是生活随笔為你收集整理的css 图片换行_好程序员web前端学习路线分享CSS浮动-文档流篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。