資訊專欄INFORMATION COLUMN
如果在一行內(nèi)寫文字，文字過多，那么瀏覽器會自動(dòng)換行去顯示我們的文字
文字還有圖片大小不一，都會讓我們頁面的元素出現(xiàn)高矮不齊的現(xiàn)象，但是在瀏覽器查看我們的頁面總會發(fā)現(xiàn)底邊對齊
例：
<!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>效果測試：
多個(gè)空格會被合并成一個(gè)空格顯示到瀏覽器頁面中。img標(biāo)簽換行寫。會發(fā)現(xiàn)每張圖片之間有間隙，如果在一行內(nèi)寫img標(biāo)簽，就解決了這個(gè)問題，但是我們不會這樣去寫我們的html結(jié)構(gòu)。這種現(xiàn)象稱為空白折疊現(xiàn)象
浮動(dòng)是css里面布局最多的一個(gè)屬性，也是很重要的一個(gè)屬性
表示浮動(dòng)的意思，它有三個(gè)值：
none: 表示不浮動(dòng)，默認(rèn)
left: 表示左浮動(dòng)
right：表示右浮動(dòng)
看一個(gè)例子：
<!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>
效果展示：
發(fā)現(xiàn)一個(gè)div就占了整整一行，因?yàn)閐iv是塊級標(biāo)簽，所以默認(rèn)占一行，那么在實(shí)際的開發(fā)中，我們也許就需要把這兩哥div放在同一行，那么這就可以設(shè)置浮動(dòng)屬性：
<!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>
效果展示：
看到了吧，這就是浮動(dòng)的效果
脫標(biāo)意思就是脫離標(biāo)準(zhǔn)文檔流，其元素不再受文檔流的控制。什么意思呢？直接看例子：
<!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>
效果展示：
發(fā)現(xiàn)什么沒有？由于div1設(shè)置了浮動(dòng)向左的效果，而div2沒有設(shè)置，這就直接導(dǎo)致div1看起來放在div2的上面了對吧？原因是這樣的，由于div2沒有設(shè)置浮動(dòng)，div1設(shè)置了浮動(dòng)，div1就脫離了標(biāo)準(zhǔn)文檔流，所在位置不在文檔流內(nèi)，而div2在，瀏覽器則把div2作為文檔流內(nèi)的第一個(gè)進(jìn)行排版渲染到了第一個(gè)位置上，div1直接給浮起來了。這個(gè)現(xiàn)象就是脫標(biāo)，或者你可以說成浮起來了或者飄起來了
而注意看下面的span標(biāo)簽，由于span標(biāo)簽本來是行內(nèi)標(biāo)簽，但是由于設(shè)置了浮動(dòng)，居然也可以設(shè)置寬高了。
所以這里要注意，所有元素一旦設(shè)置浮動(dòng)，就能夠并排，并且都不區(qū)分塊級標(biāo)簽和行內(nèi)標(biāo)簽，都可以設(shè)置寬高
這個(gè)互相貼靠，在上面那個(gè)例子里的就是貼靠的狀態(tài)了
但是還是要注意兩點(diǎn)：
如果父元素有足夠的空間，那么盒子從左到右相互貼靠。
如果父元素沒有足夠的空間，那么不夠放的盒子會另起一行貼靠
例：
<!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>
效果：
這個(gè)就跟你們學(xué)辦公軟件word調(diào)整文章樣式一樣的，直接上例子：
<!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>
效果：
這里就是因?yàn)楫?dāng)div浮動(dòng)，p不浮動(dòng)，div遮蓋住了p，div的層級提高，但是p中的文字不會被遮蓋，此時(shí)就形成了字圍效果
一個(gè)浮動(dòng)元素如果沒有設(shè)置width，那么就自動(dòng)收縮為文字的寬度
例：
<!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>
效果展示：
由上面的浮動(dòng)特性，我們已經(jīng)可以得知，脫標(biāo)的話，很可能會影響我們的頁面效果（除了本來就需要這種效果以外），而且在以后的web頁面開發(fā)中，可能你會遇到由上面的div設(shè)置了浮動(dòng)，導(dǎo)致下面的div排版不正常，影響頁面布局，例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> <style> * { padding: 0; margin: 0; } .father { width: 1126px; /*子元素浮動(dòng) 父盒子一般不設(shè)置高度*/ /*出現(xiàn)這種問題，我們要清除浮動(dòng)帶來影響*/ /*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>
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1546.html
摘要：默認(rèn)值，沒有定位，元素出現(xiàn)在正常的文檔流中。生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。和屬性的異同共同點(diǎn)對內(nèi)聯(lián)元素設(shè)置和屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。 position的值， relative和absolute分別是相對于誰進(jìn)行定位的？ 、relative:相對定位，相對于自己本身在正常文檔流中的位置進(jìn)行定位。、absolute:生成絕對定位，相對于最近一...
摘要：內(nèi)核原為，現(xiàn)為內(nèi)核，等。但盒子的大小由這幾部分決定是一個(gè)屬性，與盒子模型有著密切聯(lián)系。 前言 貌似又到了一年一度跑路跳槽的時(shí)刻，由于個(gè)人的一些原因最近也參加了很多面試，發(fā)現(xiàn)有很多基礎(chǔ)性的東西掌握程度還是不夠，故此想總結(jié)一下最近面試遇到的問題以及個(gè)人認(rèn)為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關(guān)注 如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處...
摘要：內(nèi)核原為，現(xiàn)為內(nèi)核，等。但盒子的大小由這幾部分決定是一個(gè)屬性，與盒子模型有著密切聯(lián)系。 前言 貌似又到了一年一度跑路跳槽的時(shí)刻，由于個(gè)人的一些原因最近也參加了很多面試，發(fā)現(xiàn)有很多基礎(chǔ)性的東西掌握程度還是不夠，故此想總結(jié)一下最近面試遇到的問題以及個(gè)人認(rèn)為比較重要的東西，留給自己消化，也分享給有需要的小伙伴 GitHub完整版面試題，歡迎小伙伴們star關(guān)注 如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處...
摘要：正文屬性樣式表正文屬性樣式表了解了具體的各種工作原理使用方式選擇器規(guī)則層疊算法等之后，那么該來學(xué)習(xí)的也就是都支持哪些屬性樣式表了。 本篇文章已授權(quán)微信公眾號 dasu_Android（大蘇）獨(dú)家發(fā)布 聲明 本系列文章內(nèi)容全部梳理自以下四個(gè)來源： 《HTML5權(quán)威指南》 《JavaScript權(quán)威指南》 MDN web docs Github:smyhvae/web 作為一個(gè)前端小白，入...
摘要：方式是將內(nèi)容放在了請求頭，所以會顯示在上，將內(nèi)容放在了請求體。此外，方式對提交內(nèi)容的長度有限制，必須在之內(nèi)，而沒有。如果屬性設(shè)置，表示選擇框只能同時(shí)顯示三項(xiàng)。表頭會自動(dòng)加粗居中，在表格內(nèi)容區(qū)，表示行，表示列。HTML HTML叫做超文本標(biāo)記語言，是一種制作萬維網(wǎng)頁面標(biāo)準(zhǔn)語言。相當(dāng)于定義一套規(guī)則，大家都來遵守它，這樣瀏覽器就可以去解釋它。 瀏覽器負(fù)責(zé)將標(biāo)簽翻譯成用戶看得懂的格式，呈現(xiàn)給用戶。 ...
閱讀 736·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6184·2021-11-29 11:00
