當(dāng)前位置：首頁(yè) >

web开发：清浮动

發(fā)布時(shí)間：2025/3/15 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 web开发：清浮动小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、display總結(jié)

二、overflow

三、浮動(dòng)布局

四、清浮動(dòng)

五、清浮動(dòng)的方式

一、display總結(jié)

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>display總結(jié)</title><style type="text/css">/*1.同行顯示, 就相當(dāng)于純文本, 當(dāng)一行顯示不下, 如就是一個(gè)字顯示不下,那么顯示不下的那一個(gè)字就會(huì)自動(dòng)換行,和純文本的區(qū)別就是有標(biāo)簽整體的概念,標(biāo)簽與標(biāo)簽間有一個(gè)空格的隔斷*//*2.支持部分css樣式, 不支持寬高 | 行高(行高會(huì)映射到父級(jí)block標(biāo)簽) | margin上下*//*3.content由文本內(nèi)容撐開(kāi)*//*4.inline標(biāo)簽只嵌套inline標(biāo)簽*/abc {display: inline;background: orange;/*width: 200px;*//*height: 200px;*//*line-height: 300px;*/margin-top: 300px;margin-bottom: 300px;}.d1 {background: red;}</style><style type="text/css">/*1.同行顯示, 當(dāng)一行顯示不下, 標(biāo)簽會(huì)作為一個(gè)整體換行顯示*//*2.支持所有css樣式*//*3.content默認(rèn)由文本(圖片)內(nèi)容撐開(kāi),也可以自定義寬高, 當(dāng)自定義寬高后,一定采用自定義寬高(顯示區(qū)域不足,內(nèi)容會(huì)在標(biāo)簽內(nèi)容換行顯示,可能超出顯示區(qū)域)*//*4.inline-block標(biāo)簽不建議嵌套任意標(biāo)簽*/.d2 {background: pink;}def {display: inline-block;background: blue;width: 20px;height: 20px;}</style><style type="text/css">/*1.異行顯示, 不管自身區(qū)域多大, 都會(huì)獨(dú)占一行*//*2.支持所有css樣式*//*3.width默認(rèn)繼承父級(jí),height由內(nèi)容(文本,圖片,子標(biāo)簽)撐開(kāi), 當(dāng)設(shè)置自定義寬高后,一定采用自定義寬高*//*4.block可以嵌套任意標(biāo)簽*/.d3 {background: brown;}opq {display: block;background: cyan;width: 20px;height: 20px;}</style> </head> <body><div class="d1"><abc>自定義標(biāo)簽</abc><abc>自定義標(biāo)簽</abc><abc>自定義標(biāo)簽</abc></div><div class="d2"><def>自定義標(biāo)簽</def><def>自定義標(biāo)簽</def><def>自定義標(biāo)簽</def></div><div class="d3"><opq>自定義標(biāo)簽</opq><opq>自定義標(biāo)簽</opq><opq>自定義標(biāo)簽</opq></div><style type="text/css">xyz {display: inline-block;width: 200px;height: 200px;background: yellow;}xyz {/*文本垂直方向控制屬性*/vertical-align: top;}.x1 {height: 100px;}.x2 {line-height: 200px;}</style><div class="d4"><xyz class="x1">一段文本</xyz><xyz class="x2">兩段文本</xyz><xyz class="x3">三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本三段文本</xyz></div> </body> </html>

二、overflow

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>overflow</title><style type="text/css">div {width: 50px;height: 100px;}.d1 { background: red }.d2 { background: orange }.d2 {margin-top: -50px;}</style><style type="text/css">.b1 {background: cyan;/* ***** *//*overflow: 處理內(nèi)容超出盒子顯示區(qū)域*//*auto: 自適應(yīng), 內(nèi)容超出, 滾動(dòng)顯示超出部分, 不超出則正常顯示*//*scroll: 一直采用滾動(dòng)方式顯示*//*hidden: 隱藏超出盒子顯示范圍的內(nèi)容*/overflow: hidden;}/*注: 根據(jù)文本的具體超出范圍, 橫向縱向均可能出現(xiàn)滾動(dòng)條*/.b2 {width: 100px;background: tan;overflow: scroll;}</style> </head> <body><div class="d1">我是文本我是文本我是文本</div><div class="d2">我是文本我是文本我是文本</div><div class="b1">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div><div class="b2">asdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsda</div> </body> </html>

三、浮動(dòng)布局

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>浮動(dòng)布局</title><style type="text/css">body {/*background: cyan;*/}.temp {width: 200px;height: 200px;background: orange;/*Box自身水平方向的位置由margin左或右決定(具體依據(jù): 參照BFC方位)，屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加。*/margin-right: 100px;float: right;}</style><style type="text/css">/*float: 浮動(dòng)布局, 改變BFC的參照方位*//*為什么要使用: 塊級(jí)盒子就會(huì)同行顯示*//*float: left | right*/.box {width: 100px;height: 100px;background: orange;font: 900 40px/100px "STSong";text-align: center;}.box:nth-child(2n) {background: red;}.box {float: right;}.box:last-child {/*盒模型布局可以在其他布局的基礎(chǔ)上進(jìn)行盒子位置微調(diào)*//*margin-left: 10px;*/}/*注: 浮動(dòng)布局的橫向顯示范圍由父級(jí)width決定, 當(dāng)一行顯示不下時(shí), 會(huì)自動(dòng)換行,排列方式(起點(diǎn))還是遵循BFC參照方位 => 固定了父級(jí)width也就固定了浮動(dòng)布局的行數(shù)*/</style> </head> <body><div class="wraper"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div></div> </body> </html>

四、清浮動(dòng)

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>清浮動(dòng)</title><style type="text/css">.outer {/*height: 200px;*/background: orange;}/*清浮動(dòng): 讓父級(jí)(有浮動(dòng)子級(jí))獲得一個(gè)合適的高度*//*子標(biāo)簽設(shè)置浮動(dòng) => 子標(biāo)簽不完全脫離文檔流*//*脫離文檔流: 產(chǎn)生可新的BFC, (不再關(guān)聯(lián)父級(jí)寬高)*//*浮動(dòng)的子級(jí), 默認(rèn)不會(huì)獲取父級(jí)寬度, 也不會(huì)撐開(kāi)父級(jí)高度*//*不完全: 父級(jí)在做清浮動(dòng)操作后,可以重新被子級(jí)撐開(kāi)高度*//*當(dāng)父級(jí)沒(méi)有下兄弟標(biāo)簽, 可以不做清浮動(dòng)操作, 但清浮動(dòng)操作應(yīng)該在每一次發(fā)送浮動(dòng)后均需要處理的*/.inner {width: 200px;height: 200px;background: red;float: left;border-radius: 50%;}/*清浮動(dòng)操作*/.outer:after {content: "";display: block;clear: both;}.box {width: 200px;height: 200px;background: cyan;/*margin-top: -200px;*/}</style><style type="text/css">/*盒子先加載:before, 再加載自身(文本,圖片,子標(biāo)簽), 最后加載:after*/.div:before {content: "123"}.div:after {content: "456"}</style> </head> <body><div class="outer"><div class="inner"></div></div><div class="box"></div><div class="div">原文本</div> </body> </html>

五、清浮動(dòng)的方式

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>清浮動(dòng)方式</title><style type="text/css">.sub, .box {width: 200px;height: 200px;background: orange;}.box {background: red;}.sub {float: left;}/*① 設(shè)置死高度*/.sup {/*height: 200px;*/}/*② overflow*/.sup {/*background: cyan;*//*隱藏?zé)o用的內(nèi)容*//*overflow: hidden;*/}/*③ 兄弟標(biāo)簽清浮動(dòng)*/.box {/*清浮動(dòng)屬性: left | right | both*//*clear: both;*/}/*④ 偽類清浮動(dòng)*/.sup:after {content: "";display: block;clear: both;}/*before => 自身(子內(nèi)容)(會(huì)產(chǎn)生問(wèn)題) => after => 兄弟*/</style> </head> <body><div class="sup"><div class="sub"></div></div><div class="box"></div><style type="text/css">.bb {width: 100px;/*手動(dòng)設(shè)置了死高度,才會(huì)產(chǎn)生超出高度的內(nèi)容為無(wú)用內(nèi)容*//*height: 50px;*/background: pink;overflow: hidden;}</style> </body> </html>

轉(zhuǎn)載于:https://www.cnblogs.com/wuzhengzheng/p/10273530.html

總結(jié)

以上是生活随笔為你收集整理的web开发：清浮动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

web开发：清浮动

總結(jié)