什么是CSS文檔流-創(chuàng)新互聯

本篇內容介紹了“什么是CSS文檔流”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創(chuàng)新互聯公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：做網站、網站制作、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的新華網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

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

文本和圖片的排列

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

因為圖片和一個文字元素一樣，因此，圖片的高度大于文字的高度，就會把這一行撐高，圖片越高，行越高。在同一行的文字默認就會在圖片的下端。如果你希望文字相對在圖片的中間位置，那么就需要給圖片設置一個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會將后面的元素都放在另外一行了。

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

　　例如：

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

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

	行內元素	塊元素
同行	輸入行內元素，就會自動同行	輸入塊級元素，自動換行，并且獨立占有一行，其它行內元素不會和它同行的。
設置寬高	行內元素部分內容是不可以設置寬高的，例如span容器,a超鏈接標簽等等，當然有些還是可以通過CSS樣式更改寬高的，例如input，img,textarea等非文字的標簽	塊元素直接可以設置寬高，如果沒有設置就會根據該元素的父級容器的寬自動設置100%，高度是根據內容撐開的，如果沒有內容，塊元素默認高度是0，這點很重要。

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

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

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

　　這是默認的行內元素

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

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

　　這是默認的div的塊元素樣式

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

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

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

　　塊元素變成行內塊元素

　　行內元素變行內塊元素

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

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

“什么是CSS文檔流”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯-成都網站建設公司網站，小編將為大家輸出更多高質量的實用文章！

本文標題：什么是CSS文檔流-創(chuàng)新互聯
分享鏈接：http://muchs.cn/article40/ddheeo.html

成都網站建設公司_創(chuàng)新互聯，為您提供外貿建站、網站內鏈、微信公眾號、域名注冊、品牌網站制作、企業(yè)網站制作

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯