文檔流
document flow=> normal flow
本質：普通流/常規流
流：水流 河流... => 自上而下（連續的，連續的
文檔：頁面主體
文檔流：一個連續具有上下邏輯的頁面整體
理解：出現在頁面中的顯示內容，均可以理解為在文檔流中（片面的）
概念：將窗體自上而下分成一行一行，塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素
BFC：Block formatting context
概念：由blck-level box 參與布局，同一區域（容器空間）中，相互影響，且不會對空間區域外產生影響
<!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、水平布局方向 */
/* 更改BFC水平布局方向：從右至左 */
float: right;
margin-right:-50px;
}
.b1{
width:200px;
height:200px;
background-color: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
<!-- b1 b2 同在一個區域 | bb1 和bb2同在一個區域 -->
<div class="b1">
<div class="bb1"></div>
<div class="bb2"></div>
</div>
<div class="b2">
</div>
</body>
</html>
浮動布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>浮動布局</title>
<!-- part1 -->
<style type="text/css">
.article{
width:450px;
border:1px solid #333;
padding:0;
}
.p1 img{
width:200px;
/* 塊級：獨占一行 */
display:block;
/* 浮動后：可以同行顯示（只占自身顯示區域） */
float: left;
margin-right:15px;
}
.p1{
display:none;
}
</style>
<!-- part2 -->
<style type="text/css">
.p2{
width:300px;
height:300px;
background-color:orange;
}
.sub{
width:100px;
height:100px;
background-color:red;
}
/* float: left; BFC橫向布局規則為從左至右，且block box 同行顯示(之間沒有間隔) */
/* 注：從左至右可以理解橫坐標正方向為右 */
.sub{
float: left;
}
/* float: right; BFC橫向布局規則為從右至左，且block box 同行顯示(之間沒有間隔) */
/* 注：從右至左可以理解橫坐標正方向為左 */
.sub{
float: right;
}
.sub:nth-child(2){
margin-right:-100px;
}
/* 隱藏p2 */
.p2{
display:none;
}
</style>
<!-- part3 -->
<style type="text/css">
.sup{
width:300px;
background-color:orange;
}
.sup1{
width:100px;
height:100px;
background-color:red;
border-radius:50%;
}
.sup1:nth-child(2){
/* margin-top:-100px; */
/* 文本層次高於背景層次 */
/* 2的背景只能遮擋1的背景，但不能遮擋1的文本 */
/* background-color:pink;
margin-top:-80px; */
/* 父級的高度最終決定於邏輯最后位置上的子級的盒子底端 */
}
/* 顯示區域重疊，文本區域正常(與顯示區域共同討論就不正常) */
.br{
width:300px;
height:100px;
background-color:yellowgreen;
}
/* 恢復正常：父級剛好擁有存放所有子級的高度（合適高度） */
.sup{
height:100px;
}
.sup1{
float:left;
}
/* 總結（坑）：當target標簽的內部有浮動的子級，target的兄弟標簽布局會出現顯示異常 */
</style>
</head>
<body>
<!-- part3 -->
<!-- 浮動產生的問題:父級未設置固定高度，不再撐開父級高度 -->
<div class="p3">
<div class="sup">
<div class="sup1">1</div>
<div class="sup1">2</div>
</div>
<div class="br">1231222222222222223</div>
</div>
<!-- part2 -->
<!-- 基本語法: float：left|right -->
<div class="p2">
<div class="sub">1</div>
<div class="sub">2</div>
</div>
<!-- part1 -->
<!-- 解決的問題:讓block box 同行顯示 -->
<div class="p1">
<div class="article">
<img src="icon.jpg" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>
清浮動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>清浮動</title>
<style type="text/css">
.sup{
width:300px;
/* height:50px; */
background-color:orange;
}
.sub,.sub1{
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 */
/* 方式1 */
/* 設置自身高度 */
/* .sup{
height:100px;
} */
/* 方式2 */
/* 設置自身overflow:hidden; */
/* .sup{
overflow:hidden;
} */
/* 設置兄弟標簽的clear:left | right | both */
/* .sub1{
float:right;
} */
/* .br{
clear:left;
}
*/
/* 方式三 */
/* 設置自身：after偽類 */
.sup:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<!-- 不完全脫離文檔流 -->
<!-- 通常文檔流中，子標簽在父級標簽未設置高度的情況下，會撐開父級的高度 -->
<!-- 脫離文檔流后的子級標簽，不在撐開父級高度 -->
<!-- 不完全脫離文檔流（浮動后的結果），不清浮動，不會撐開父級的高度。清浮動后，會重新撐開父級高度 -->
<!-- 清浮動本質：讓父級獲得合適的高度 -->
<div class="sup">
<div class="sub">1</div>
<div class="sub">2</div>
<!-- <div class="sub1">2</div> -->
</div>
<div class="br"></div>
</body>
</html>
流式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>流式布局</title>
<style type="text/css">
.box{
/* 百分比流式 */
/* 參考最近父級 */
/* width:90%; */
/* max-width:900px;
min-width:600px; */
/* 窗口比 */
/* width:90vw;
max-width:900px;
min-width:600px; */
height:600px;
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;
}
.text{
/* 1em=16px 不一定*/
/* font-size:1em; */
/* font-size:16px; */
/* font-size:0.4em; */
/* em為最近設置字體大小的父級規定的字體大小 */
font-size:1rem;
/* rem為html字體大小 */
}
html{
font-size:40px;
}
</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="text">wenben</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設置定位 -->
<!-- position 四個值：
1.static：靜態，未定位（默認值）
2.relative：相對定位，未脫離文檔流,會撐開父級，效果是定於那個位置
3.absolute：絕對定位，完全脫離文檔流，不會撐開父級 效果是相當於定於那個位置
4.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 />
</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">
html,body{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
background-color:red;
}
.b2{
background-color:orange;
}
.b1{
/* 1.完全脫離文檔流 */
/* position:absolute; */
/* 總結：不在文檔流中占位，也永遠不會撐開父級高度，永遠不會影響兄弟布局，顯示層高於文檔流顯示層 */
/* 打開定位方位 */
/* margin-left:100px;
margin-top:100px; */
/* 總結：margin依舊可以影響自身布局，但不會影響父級即兄弟布局 */
/* 2.參考系在下面sup sub 例子 */
/* 3.同時存在，左右取左，上下取上 */
/* left:30px; */
/* right:100px; */
}
.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; */
/* 絕對定位好處：如果自身已經采用絕對定位布局了，name子級一定參考自身進行定位
*/
margin:100px auto;
/* margin-top margin-bottom 起作用 margin-left，margin-right 沒有起作用，詳細解釋在下面的注。 */
position:absolute;
/* 注：如果父級只是輔助子級進行絕對定位，name一定優先相對定位，因為絕對定位會產生新的BFC，導致盒模型布局會受影響 */
/* 注：margin-top|left 依舊起作用，只是sup已經脫離文檔流，不會或得到body寬度，所以auto沒有參考值 */
}
.sub{
/* 2.參考坐標系為最近的定位父級 */
position:absolute;
/* left:0; */
top:0;
/* 父級：sup(未定位)->body(未定位)->html(文檔窗口) */
}
</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>