這篇文章給大家分享的是web前端CSS浮動的詳細(xì)介紹，相信大部分人都還沒學(xué)會文檔流這個(gè)技能，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話不多說，一起往下看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到丹東網(wǎng)站設(shè)計(jì)與丹東網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋丹東地區(qū)。

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

文本和圖片的排列

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

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

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

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

塊元素和行內(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" title="文本"> 文本框 <textarea title="多行文本">...</textarea>  多行文本 <select title="下拉列表">...</select>  下拉列表

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

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

例如：

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

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

	行內(nèi)元素	塊元素
同行	輸入行內(nèi)元素，就會自動同行	輸入塊級元素，自動換行，并且獨(dú)立占有一行，其它行內(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，這點(diǎn)很重要。

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

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

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

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

　這是轉(zhuǎn)換后的。我們發(fā)現(xiàn)文字塊換行了，而且獨(dú)立占有一行，在這里我們設(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)塊元素

　有時(shí)候我們想讓容器（不是textArea或者input）既有寬高又可以排列在同一行中，我們可以轉(zhuǎn)換為行內(nèi)塊容器。尤其是我們希望將多個(gè)不同寬高的容器放在同一行中，并且可以通過margin調(diào)節(jié)他們的位置（注意：行內(nèi)元素不能通過margin調(diào)節(jié)垂直位置，因?yàn)樗麄兌际峭恍械模@時(shí)候行內(nèi)塊元素就非常有必要了。塊元素變成行內(nèi)塊元素

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

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

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

關(guān)于web前端CSS浮動就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。

標(biāo)題名稱：web前端CSS浮動分享
文章網(wǎng)址：http://chinadenli.net/article2/ipsoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站營銷、做網(wǎng)站、用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、Google

廣告

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