|
目錄
一、文檔流
1.什么是文檔流
文檔：頁面主體
文檔流：又叫普通流/常規(guī)流，時一個連續(xù)具有邏輯上下的頁面主題。
理解：出現(xiàn)在頁面中的顯示內(nèi)容，均可以理解為在文檔流中。
概念：將窗體自上而下分成一行一行，塊級元素從上至下、行內(nèi)元素從左至右的順序依次排放元素。
2.BFC
BFC：Block formatting context
概念：由block-level box參與布局，同一區(qū)域(容器空間)中，互相影響，且不會對區(qū)域外產(chǎn)生影響
<!-- b1與b2同在一個區(qū)域 bb1同在一個區(qū)域bb2 -->
<div class="b1">
<div class="bb1"></div>
<div class="bb2"></div>
</div>
<div class="b2">
</div>
BFC默認水平布局時從左至右
float:left;
更改水平布局從右至左
float: right;
二、浮動布局
浮動布局就是為了讓塊元素能同行顯示
part1
<!-- 解決的問題：讓block box同行顯示 -->
div class="eg">
<div class="article">
<img src="../day47/icon5.png" alt="">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
</div>
<style>
.sup{
width: 300px;
height: 300px;
background-color: orange;
}
.sub{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
/*BFC橫向布局規(guī)則為從左至右，且block box同行顯示(之間沒有間隔)*/
/*注：從左至右可以理解橫坐標正方向為右*/
.sub{
float: left;
}
/*BFC橫向布局規(guī)則為從右至左，且block box同行顯示(之間沒有間隔)*/
/*注：從右至左可以理解橫坐標正方向為左*/
.sub{
float: right;
}
.p2{
display: none;
}
</style>
part2
浮動的基本語法
<div class="p2">
<div class="sup">
<div class="sub">1</div>
<div class="sub">2</div>
</div>
</div>
<style>
.sup{
width: 300px;
height: 300px;
background-color: orange;
}
.sub{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
/*BFC橫向布局規(guī)則為從左至右，且block box同行顯示(之間沒有間隔)*/
/*注：從左至右可以理解橫坐標正方向為右*/
.sub{
float: left;
}
/*BFC橫向布局規(guī)則為從右至左，且block box同行顯示(之間沒有間隔)*/
/*注：從右至左可以理解橫坐標正方向為左*/
.sub{
float: right;
}
.p2{
display: none;
}
</style>
part3
浮動會產(chǎn)生的坑
<div class="p3">
<div class="sp">
<div class="sb"></div>
<div class="sb"></div>
</div>
<div class="br">123313123123123131213</div>
</div>
<style>
.sp{
width: 300px;
background-color: orange;
}
.sb{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
.sb:nth-child(2){
/*文本層次高于背景層次*/
/*2的背景只能遮擋1的背景，但不能遮擋1的文本*/
/*margin-top: -100px;
background-color: pink;*/
/*父級的高度取決于邏輯最后位置上的子級的盒子低端*/
}
.sb{
float: left;
}
/*顯示區(qū)域重疊,文本區(qū)域正常*/
.br{
width: 300px;
height: 100px;
background: yellowgreen;
}
/*恢復正常:父級剛好用于存放所有子級的合適高度*/
.sp{
height: 100px;
}
/*總結(jié):當目標標簽的內(nèi)部有浮動的子級,目標標簽的兄弟標簽布局會出現(xiàn)顯示異常*/
</style>
三、清浮動
? 通常文檔流中,子標簽在父級標簽未設置高度的情況下,會撐開父級高度，脫離文檔流后子級標簽,不在撐開父級高度。
? 不完全脫離文檔流(浮動后的結(jié)果)：不清浮動,不會撐開父級高度,清浮動后,會撐開父級的高度
? 清浮動的本質(zhì):讓父級獲得合適的高度
<div class="sup">
<div class="sub"></div>
<div class="sub"></div>
</div>
<div class="br">
</div>
<style>
.sup{
width: 300px;
background-color: orange;
}
.sub{
width: 100px;
height: 100px;
background-color:red;
border-radius: 50%
}
.br{
width: 200px;
height: 200px;
background-color:pink;
}
.sub{
float: left;
}
/*清浮動對象:擁有浮動子級的父級 sup*/
/*1.設置自身的高度*/
/*.sup{
height: 100px;
}*/
/*2.設置自身的overflow:hidden*/
/*.sup{
overflow: hidden;
}*/
/*3.設置自兄弟標簽的clear:left | right | both*/
/*.br{
clear: both;
}*/
/*4.設置自身偽類:after*/
.sup:after{
content: '';
display: block;
clear: both;
}
</style>
四、流式布局
目的:讓布局脫離固定值限制,可以根據(jù)頁面情況改變相應發(fā)生改變
<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>
<style>
.box{
/*百分比流式*/
/*參考父級*/
/*width: 90%;*/
/*窗口比*/
width: 90vw;
max-width: 1000px;
min-width: 600px;
height: 600px;
background-color: orange;
margin: 0 auto;
}
.b{
width: 100px;
height: 100px;
background:red;
border-radius: 50%;
float: left;
}
body{
font-size: 30px;
}
.txt{
font-size: 0.4em;
/*em為最近設置字體大小的父級規(guī)定的字體大小*/
font-size: 1rem;
/*rem為html設置的字體大小*/
}
</style>
五、定位布局
目的:讓目標標簽在制定參考系下,任意布局
基本語法:
? 1.通過position設置定位是否開啟
? static:靜態(tài),默認值,為定位
? relative:相對定位,未脫離文檔流
? absolute:絕對定位,完全脫離文檔流
? fixed:固定定位,完全脫離文檔流
? 2.定位開啟后,四個定位方位便會開啟,且四個方位均參與布局,如果發(fā)生沖突,左右取左,上下取上
<div class="box"></div>
br*100
<style>
.box{
width: 150px;
height: 300px;
background-color: orange;
/*定位*/
position: fixed;
/*打開了布局方位*/
left: 10px;
top: calc(50vh - 150px);
}
</style>
相對布局
<div class="b1"></div>
<div class="b2"></div>
<style>
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規(guī)則下margin布局,上下影響*/
/*margin-top: 30px;
margin-bottom: 30px;*/
/*開啟定位*/
position: relative;
/*2.方位布局下,上下不會影響*/
left:30px;
top: 30px;
/*總結(jié):方位布局只改變盒子顯示區(qū)域,不改變盒子原有位置*/
/*3.參考系:相對定位參考系為自身原有位置*/
right: 30px;
/*總結(jié):方位布局就是顯示區(qū)域上下左右距離自身原始位置上下左右*/
/*4.left=-right top=-bottom,同時存在,左右取左,上下取上*/
}
</style>
絕對定位
<div class="sup">
<div class="sub"></div>
</div>
<style>
.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;*/
/*絕對定位好處:如果自身已經(jīng)采用絕對定位布局,那么子級一定參考自身進行定位*/
position: absolute;
/*注:如果父級只是輔助子級進行絕對定位,那么一定選相對定位,因為絕對定位會產(chǎn)生新的BFC,導致盒模型布局會受影響*/
}
.sub{
/*2.參考系:為最近的定位父級*/
position: absolute;
left: 0px;
top: 0px;
/*父級:sup(為定位) -> body(為定位) -> html(文檔窗口)*/
/*總結(jié):*/
/*3.同時存在,左右取左,上下取上*/
}
</style>
固定定位
<!-- 1.完全脫離文檔流 -->
<!-- 2.參考系為文檔窗口 -->
<!-- 3.左右取左，上下取上 -->
<div class="sup">
<div class="sub"><h1>徐誠琦大傻逼</h1></div>
</div>
<style>
.sup{
width: 500px;
height: 500px;
background-color: orange;
margin: 0 auto;
}
.sub{
width: 200px;
height: 200px;
background-color: red;
}
.sub{
position: fixed;
left: 0;
margin-top: 0;
}
</style>
來源：http://www./content-4-25281.html
|
