web开发：清浮动
一、display總結
二、overflow
三、浮動布局
四、清浮動
五、清浮動的方式
?
?
一、display總結
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>display總結</title><style type="text/css">/*1.同行顯示, 就相當于純文本, 當一行顯示不下, 如就是一個字顯示不下,那么顯示不下的那一個字就會自動換行,和純文本的區(qū)別就是有標簽整體的概念,標簽與標簽間有一個空格的隔斷*//*2.支持部分css樣式, 不支持寬高 | 行高(行高會映射到父級block標簽) | margin上下*//*3.content由文本內(nèi)容撐開*//*4.inline標簽只嵌套inline標簽*/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.同行顯示, 當一行顯示不下, 標簽會作為一個整體換行顯示*//*2.支持所有css樣式*//*3.content默認由文本(圖片)內(nèi)容撐開,也可以自定義寬高, 當自定義寬高后,一定采用自定義寬高(顯示區(qū)域不足,內(nèi)容會在標簽內(nèi)容換行顯示,可能超出顯示區(qū)域)*//*4.inline-block標簽不建議嵌套任意標簽*/.d2 {background: pink;}def {display: inline-block;background: blue;width: 20px;height: 20px;}</style><style type="text/css">/*1.異行顯示, 不管自身區(qū)域多大, 都會獨占一行*//*2.支持所有css樣式*//*3.width默認繼承父級,height由內(nèi)容(文本,圖片,子標簽)撐開, 當設置自定義寬高后,一定采用自定義寬高*//*4.block可以嵌套任意標簽*/.d3 {background: brown;}opq {display: block;background: cyan;width: 20px;height: 20px;}</style> </head> <body><div class="d1"><abc>自定義標簽</abc><abc>自定義標簽</abc><abc>自定義標簽</abc></div><div class="d2"><def>自定義標簽</def><def>自定義標簽</def><def>自定義標簽</def></div><div class="d3"><opq>自定義標簽</opq><opq>自定義標簽</opq><opq>自定義標簽</opq></div><!-- inline-block不建議作為結構|布局層理由 --><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: 自適應, 內(nèi)容超出, 滾動顯示超出部分, 不超出則正常顯示*//*scroll: 一直采用滾動方式顯示*//*hidden: 隱藏超出盒子顯示范圍的內(nèi)容*/overflow: hidden;}/*注: 根據(jù)文本的具體超出范圍, 橫向縱向均可能出現(xiàn)滾動條*/.b2 {width: 100px;background: tan;overflow: scroll;}</style> </head> <body><!-- 文本層要高于背景層 --><div class="d1">我是文本我是文本我是文本</div><div class="d2">我是文本我是文本我是文本</div><!-- 問題: 內(nèi)容(文本,圖片,子標簽)會超出盒子的顯示區(qū)域 --><div class="b1">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</div><div class="b2">asdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsdaasdvsda</div> </body> </html>?
三、浮動布局
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>浮動布局</title><style type="text/css">body {/*background: cyan;*/}.temp {width: 200px;height: 200px;background: orange;/*Box自身水平方向的位置由margin左或右決定(具體依據(jù): 參照BFC方位)，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加。*/margin-right: 100px;float: right;}</style><style type="text/css">/*float: 浮動布局, 改變BFC的參照方位*//*為什么要使用: 塊級盒子就會同行顯示*//*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 {/*盒模型布局可以在其他布局的基礎上進行盒子位置微調(diào)*//*margin-left: 10px;*/}/*注: 浮動布局的橫向顯示范圍由父級width決定, 當一行顯示不下時, 會自動換行,排列方式(起點)還是遵循BFC參照方位 => 固定了父級width也就固定了浮動布局的行數(shù)*/</style> </head> <body><!-- <div class="temp"></div> --><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>?
四、清浮動
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>清浮動</title><style type="text/css">.outer {/*height: 200px;*/background: orange;}/*清浮動: 讓父級(有浮動子級)獲得一個合適的高度*//*子標簽設置浮動 => 子標簽不完全脫離文檔流*//*脫離文檔流: 產(chǎn)生可新的BFC, (不再關聯(lián)父級寬高)*//*浮動的子級, 默認不會獲取父級寬度, 也不會撐開父級高度*//*不完全: 父級在做清浮動操作后,可以重新被子級撐開高度*//*當父級沒有下兄弟標簽, 可以不做清浮動操作, 但清浮動操作應該在每一次發(fā)送浮動后均需要處理的*/.inner {width: 200px;height: 200px;background: red;float: left;border-radius: 50%;}/*清浮動操作*/.outer:after {content: "";display: block;clear: both;}.box {width: 200px;height: 200px;background: cyan;/*margin-top: -200px;*/}</style><style type="text/css">/*盒子先加載:before, 再加載自身(文本,圖片,子標簽), 最后加載: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>?
五、清浮動的方式
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>清浮動方式</title><style type="text/css">.sub, .box {width: 200px;height: 200px;background: orange;}.box {background: red;}.sub {float: left;}/*① 設置死高度*/.sup {/*height: 200px;*/}/*② overflow*/.sup {/*background: cyan;*//*隱藏無用的內(nèi)容*//*overflow: hidden;*/}/*③ 兄弟標簽清浮動*/.box {/*清浮動屬性: left | right | both*//*clear: both;*/}/*④ 偽類清浮動*/.sup:after {content: "";display: block;clear: both;}/*before => 自身(子內(nèi)容)(會產(chǎn)生問題) => after => 兄弟*/</style> </head> <body><!-- 清浮動: 使父級獲取一個合適高度 --><!-- 通常情況下在子級浮動,父級不會被撐開高度在該問題發(fā)生之后做清浮動操作 --><!-- 在發(fā)生浮動之前, 可以通過設置父級的高度來避免浮動問題 --><div class="sup"><div class="sub"></div><!-- <div class="sub"></div><div class="sub" style="height: 300px"></div><div class="sub"></div><div class="sub"></div><div class="sub"></div> --></div><div class="box"></div><!-- overflow: hidden --><style type="text/css">.bb {width: 100px;/*手動設置了死高度,才會產(chǎn)生超出高度的內(nèi)容為無用內(nèi)容*//*height: 50px;*/background: pink;overflow: hidden;}</style><!-- <div class="bb">好的好的好的好的好的好的好的好的好的好的</div> --> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/wuzhengzheng/p/10273530.html
總結
- 上一篇： spring_01概念及案例
- 下一篇： 洛咕11月月赛