資訊專欄INFORMATION COLUMN
如果在一行內寫文字，文字過多，那么瀏覽器會自動換行去顯示我們的文字
文字還有圖片大小不一，都會讓我們頁面的元素出現高矮不齊的現象，但是在瀏覽器查看我們的頁面總會發現底邊對齊
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> p:first-letter{font-size:50px} </style> </head> <body> <p>test123</p> </body> </html>效果測試：
多個空格會被合并成一個空格顯示到瀏覽器頁面中。img標簽換行寫。會發現每張圖片之間有間隙，如果在一行內寫img標簽，就解決了這個問題，但是我們不會這樣去寫我們的html結構。這種現象稱為空白折疊現象
浮動是css里面布局最多的一個屬性，也是很重要的一個屬性
表示浮動的意思，它有三個值：
none: 表示不浮動，默認
left: 表示左浮動
right：表示右浮動
看一個例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .div1{background: rosybrown} .div2{background: cadetblue} </style> </head> <body> <div>div1</div><div>div2</div> </body> </html>
效果展示：
發現一個div就占了整整一行，因為div是塊級標簽，所以默認占一行，那么在實際的開發中，我們也許就需要把這兩哥div放在同一行，那么這就可以設置浮動屬性：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .div1{ background: rosybrown; float: left; } .div2{ background: cadetblue; float: left; } </style> </head> <body> <div>div1</div><div>div2</div> </body> </html>
效果展示：
看到了吧，這就是浮動的效果
脫標意思就是脫離標準文檔流，其元素不再受文檔流的控制。什么意思呢？直接看例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .div1{ width: 200px; height: 200px; background-color: red; float: left; } .div2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>test</span> </body> </html>
效果展示：
發現什么沒有？由于div1設置了浮動向左的效果，而div2沒有設置，這就直接導致div1看起來放在div2的上面了對吧？原因是這樣的，由于div2沒有設置浮動，div1設置了浮動，div1就脫離了標準文檔流，所在位置不在文檔流內，而div2在，瀏覽器則把div2作為文檔流內的第一個進行排版渲染到了第一個位置上，div1直接給浮起來了。這個現象就是脫標，或者你可以說成浮起來了或者飄起來了
而注意看下面的span標簽，由于span標簽本來是行內標簽，但是由于設置了浮動，居然也可以設置寬高了。
所以這里要注意，所有元素一旦設置浮動，就能夠并排，并且都不區分塊級標簽和行內標簽，都可以設置寬高
這個互相貼靠，在上面那個例子里的就是貼靠的狀態了
但是還是要注意兩點：
如果父元素有足夠的空間，那么盒子從左到右相互貼靠。
如果父元素沒有足夠的空間，那么不夠放的盒子會另起一行貼靠
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> .box1{ width: 900px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 450px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> </body> </html>
效果：
這個就跟你們學辦公軟件word調整文章樣式一樣的，直接上例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: #666; } </style> </head> <body> <div> <img src="https://www.baidu.com/img/bd_logo1.png" alt=""> </div> <p> 123中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國中國 </p> </body> </html>
效果：
這里就是因為當div浮動，p不浮動，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時就形成了字圍效果
一個浮動元素如果沒有設置width，那么就自動收縮為文字的寬度
例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ float: left; background-color: darkcyan; } </style> </head> <body> <div>test</div> </body> </html>
效果展示：
由上面的浮動特性，我們已經可以得知，脫標的話，很可能會影響我們的頁面效果（除了本來就需要這種效果以外），而且在以后的web頁面開發中，可能你會遇到由上面的div設置了浮動，導致下面的div排版不正常，影響頁面布局，例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> * { padding: 0; margin: 0; } .father { width: 1126px; /*子元素浮動 父盒子一般不設置高度*/ /*出現這種問題，我們要清除浮動帶來影響*/ /*height: 300px;*/ } .box1 { width: 200px; height: 500px; float: left; background-color: red; } .box2 { width: 300px; height: 200px; float: left; background-color: green; } .box3 { width: 400px; float: left; height: 100px; background-color: blue; } .father2 { width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> <div></div> </body> </html>
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1546.html
摘要：默認值，沒有定位，元素出現在正常的文檔流中。生成粘性定位的元素，容器的位置根據正常文檔流計算得出。和屬性的異同共同點對內聯元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。 position的值， relative和absolute分別是相對于誰進行定位的？ 、relative:相對定位，相對于自己本身在正常文檔流中的位置進行定位。、absolute:生成絕對定位，相對于最近一...
摘要：內核原為，現為內核，等。但盒子的大小由這幾部分決定是一個屬性，與盒子模型有著密切聯系。 前言 貌似又到了一年一度跑路跳槽的時刻，由于個人的一些原因最近也參加了很多面試，發現有很多基礎性的東西掌握程度還是不夠，故此想總結一下最近面試遇到的問題以及個人認為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關注 如果文章中有出現紕漏、錯誤之處...
摘要：內核原為，現為內核，等。但盒子的大小由這幾部分決定是一個屬性，與盒子模型有著密切聯系。 前言 貌似又到了一年一度跑路跳槽的時刻，由于個人的一些原因最近也參加了很多面試，發現有很多基礎性的東西掌握程度還是不夠，故此想總結一下最近面試遇到的問題以及個人認為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關注 如果文章中有出現紕漏、錯誤之處...
摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規則層疊算法等之后，那么該來學習的也就是都支持哪些屬性樣式表了。 本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發布 聲明 本系列文章內容全部梳理自以下四個來源： 《HTML5權威指南》 《JavaScript權威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
