第三十八天
文檔流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文檔流</title>
<style type="text/css">
.box { width: 200px;
height: 200px;
background-color: orange;
/*默認BFC水平布局方向:從左至右*/ /*margin-left: 50px;*/
/*更改BFC水平布局方向:從右至左*/ float: right; margin-right: -50px; } .b1 { width: 200px; height: 200px; background: red; margin-left: 10px; } .bb1, .bb2 { width: 50px; height: 50px; background: cyan; float: left; } .bb1 { margin-left: 20px; margin-right: 20px; } .bb2 { margin-left: 20px; } </style> </head> <body> document flow => normal flow 本質:普通流/常規流
流:水流 河流 泥石流 => 自上而下(連續的),連續的 文檔:頁面主體
文檔流:一個連續具有邏輯上下的頁面整體 理解:出現在頁面中的顯示內容,均可以理解為在文檔流中(片面的)
概念:將窗體自上而下分成一行一行，塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素。
BFC:Block formatting context 概念:由block-level box參與布局,同一區域(容器空間)中,相互影響,且不會對區域外產生影響
<!-- b1與b2 同在一個區域 | bb1與bb2 同在一個區域 --> <div class="b1"> <div class="bb1"></div> <div class="bb2"></div> </div> <div class="b2"> </div>
<div class="box"></div> </body> </html>
浮動布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>浮動布局</title> <!-- part1 --> <style type="text/css"> .article { width: 300px; border: 1px solid black; } .eg img { width: 148px; /*塊級:獨占一行*/ display: block; /*浮動後:可以同行顯示(只占自身顯示區域)*/ float: left; } .eg { display: none; } </style> <!-- part2 --> <style type="text/css"> .sup { width: 300px; height: 300px; background-color: orange; } .sub { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px ‘STSong‘; text-align: center; } /*BFC橫向布局規則為從左至右,且block box同行顯示(之間沒有間隔)*/ /*註: 從左至右可以理解橫坐標正方向為右*/ .sub { float: left; } /*BFC橫向布局規則為從右至左,且block box同行顯示(之間沒有間隔)*/ /*註: 從右至左可以理解橫坐標正方向為左*/ .sub { float: right; } /*.sub:nth-child(2) { margin-right: -100px; }*/ .p2 { display: none; } </style> <!-- part3 --> <style type="text/css"> .sp { width: 300px; background-color: orange; } .sb { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px ‘STSong‘; text-align: center; } .sb:nth-child(2) { /*margin-top: -80px;*/ /*文本層次高於背景層次*/ /*2的背景只能遮擋1的背景,但不能遮擋1的文本*/ /*background-color: pink;*/ /*父級的高度最終決定於邏輯最後位置上的子級的盒子底端*/ }
.sb { float: left; } /*顯示區域重疊,文本區域正常(與顯示區域共同討論就不正常)*/ .br { width: 300px; height: 100px; background-color: yellowgreen; } /*恢復正常:父級剛好擁有存放所有子級的高度(合適高度)*/ .sp { height: 100px; } /*總結(坑):當target標簽的內部有浮動的子級,target的兄弟標簽布局會出現顯示異常*/ </style> </head> <body> <!-- part3 --> <!-- 浮動產生的問題(坑):父級未設置固定高度,不再撐開父級高度 --> <div class="p3"> <div class="sp"> <div class="sb">1</div> <div class="sb">2</div> </div> <div class="br">1234512345123451234512345</div> </div>
<!-- part2 --> <!-- 基本語法:float: left | right --> <div class="p2"> <div class="sup"> <div class="sub">1</div> <div class="sub">2</div> </div> </div>
<!-- part1 --> <!-- 解決的問題:讓block box同行顯示 --> <!-- eg:文本環繞 --> <div class="eg"> <div class="article"><img src="img/icon.jpg" >文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div> </div> </body> </html>
清浮動 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清浮動</title> <style type="text/css"> .sup { width: 300px; background-color: orange; } .sub { width: 100px; height: 100px; background-color: red; border-radius: 50%; font: 900 40px/100px ‘STSong‘; text-align: center; } .br { width: 200px; height: 200px; background-color: pink; } .sub { float: left; } /*清浮動的對象:用於浮動子級的父級 sup*/ /*① 設置自身高度*/ /*.sup { height: 100px; }*/ /*② 設置自身overflow: hidden*/ /*.sup { overflow: hidden; }*/ /*③ 設置兄弟標簽的clear: left | right | both*/ /*.s2 { float: right; height: 50px; } .br { clear: both; }*/
/*④ 設置自身:after偽類*/ .sup:after { content: ""; display: block; clear: both; } </style> </head> <body> <!-- 不完全脫離文檔流 --> <!-- 通常文檔流中,子標簽在父級標簽未設置高度的情況下,會撐開父級的高度 --> <!-- 脫離文檔流後的子級標簽,不再撐開父級高度 --> <!-- 不完全脫離文檔流(浮動後的結果),不清浮動,不會撐開父級高度,清浮動後,會重新撐開父級高度 --> <!-- 清浮動本質:讓父級獲得合適的高度 --> <div class="sup"> <div class="sub s1">1</div> <div class="sub s2">2</div> </div> <div class="br"></div> </body> </html>
流式布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>流式布局</title> <style type="text/css"> html, body { width: 100%; margin: 0; } .box { /*百分比流式*/ /*參考最近父級*/ width: 90%; /*max-width: 1000px;*/ /*min-width: 600px;*/
/*窗口比*/ /*width: 90vw;*/ /*max-width: 1000px;*/ /*min-width: 600px;*/
height: 300px; background-color: orange; margin: 0 auto; } .b { width: 100px; height: 100px; background-color: red; border-radius: 50%; float: left; } body { font-size: 30px; } /*.sup { font-size: 20px; }*/ .txt { /*1em = 16px*/ /*font-size: 16px;*/ /*font-size: 0.4em;*/ /*總結:em為最近設置字體大小的父級規定的字體大小*/ font-size: 1rem; /*總結:rem為html字體大小*/ } html { font-size: 50px; } </style> </head> <body> <!-- 流式布局: --> <!-- 目的:讓布局脫離固定值限制,可以根據頁面情況改變相應發生改變 --> <div class="box"> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> <div class="b"></div> </div>
<div class="sup"> <div class="txt">文本</div> </div> </body> </html>
定位布局應用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位布局應用</title> <style type="text/css"> .box { width: 150px; height: 300px; background-color: orange; /*定位了*/ position: fixed; /*打開了布局方位*/ left: 10px; top: calc(50vh - 150px); } </style> <!-- 基本語法: --> <!-- 1.通過position設置定位是否開啟 --> <!-- static：靜態，未定位（默認值） --> <!-- relative: 相對定位, 未脫離文檔流 --> <!-- absolute: 絕對定位, 完全脫離文檔流 --> <!-- fixed: 固定定位, 完全脫離文檔流 --> <!-- 2.定位開啟後,四個定位方位便會開啟,且四個方位均參與布局 --> <!-- 如果發生沖突,左右取左,上下取上 --> </head> <body> <!-- 目的(應用):讓目標(要被布局的)標簽在指定參考系下任意布局 --> <div class="box"></div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
相對定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>相對定位</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: red; } .b2 { background-color: orange; }
/*不做定位操作*/ /*b1,b2均在文檔流中,b1的布局會影響到b2*/ /*.b1 { margin-top: 30px; margin-bottom: 30px; }*/
/*固定定位後*/ .b1 { /*1.未脫離文檔流*/ /*BFC規則下margin布局,上盒子依舊會影響下盒子*/ /*margin-top: 30px; margin-bottom: 30px;*/
/*開啟定位*/ position: relative; /*具有定位方位*/ /*2.方位布局下,上盒子不會影響下盒子*/ /*left: 30px; top: 30px;*/ /*總結:方位布局只改變盒子顯示區域,不改變盒子原有位置*/
/*margin-top: 30px;*/ /*3.參考系:相對定位參考系為自身原有位置*/ /*right: 30px;*/
/*總結:方位布局就是 顯示區域上|下|左|右距離自身原始位置上|下|左|右的間隔*/
/*4.left=-right top=-bottom,同時存在,左右取左,上下取上*/ left: -30px; right: -100px; } </style> </head> <body> <div class="b1"></div> <div class="b2"></div> </body> </html>
絕對定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>絕對定位</title> <style type="text/css"> div { width: 200px; height: 200px; background-color: red; } .b2 { background-color: orange; } .b1 { /*1.完全脫離文檔流*/ position: absolute; /*總結:不在文檔流中占位,也永遠不會撐開父級高度,永遠不會影響兄弟布局,顯示層高於文檔流層*/ /*打開定位方位*/ margin-left: 100px; margin-top: 100px; /*總結:margin依舊可以影響自身布局,但不會影響父級即兄弟布局*/
/*2.參考系:?*/ left: 100px; right: -100px;
/*3.同時存在,左右取左,上下取上*/ }
</style> <style type="text/css"> .sup { width: 500px; height: 500px; background-color: orange; } .sub { width: 200px; height: 200px; background-color: red; }
.sup { /*采用了盒模型布局*/ margin: 0 auto; /*需求:sub應該參考sup,sup需要定位:相對|絕對|固定*/ /*相對定位好處:父級不會脫離文檔流,滿足所有的盒模型布局*/ /*position: relative;*/ /*絕對定位好處:如果自身已經采用絕對定位布局了,那麽子級一定參考自身進行定位*/ position: absolute; margin: 100px 100px; /*註:如果父級只是輔助子級進行絕對定位,那麽一定優選相對定位,因為絕對定位會產生新的BFC,導致盒模型布局會受影響*/ /*註:margi-top|left依舊起作用,只是sup已經脫離文檔流,不會獲得到body寬度,所以auto沒有參考值*/ } .sub { /*2.參考坐標系為最近的定位父級*/ position: absolute; left: 0; right: 0; top: 0; /*父級: sup(未定位) -> body(未定位) -> html(文檔窗口)*/
/*3.同時存在,左右取左,上下取上*/ } </style> </head> <body> <!-- <div class="b1"></div> <div class="b2"></div> --> <div class="sup"> <div class="sub"></div> </div> </body> </html>
固定定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>固定定位</title> <style type="text/css"> .sup { width: 500px; height: 500px; background-color: orange; margin: 0 auto; } .sub { width: 200px; height: 200px; background-color: red; } .sup { position: relative; position: absolute; } .sub { position: fixed; left: 0; /*top: 0;*/ bottom: 0; } </style> </head> <body> <!-- 固定定位 --> <!-- 1.完全脫離文檔流 --> <!-- 2.參考系為文檔窗口 --> <!-- 3.左右取左,上下取上 --> <div class="sup"> <div class="sub"></div> </div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>
第三十八天