2020.10.04 文件流、浮動、定位

段茜琳發表於2020-10-04

1.文件流

指的是文件中的標籤在排列時所佔用的位置，將窗體自上而下分成
一行行，並在每行中從左到右的順序排放在標籤，即為文件流。
（指的就是標籤在網頁中的預設排放順序）

2.浮動

指的是使標籤脫離原來的文件流，在父標籤中浮動起來
float屬性
行級標籤浮動起來以後就是塊級標籤（可以設定寬高）
塊級標籤浮動起來以後，寬度會預設為預設為內容的寬度
任何標籤都可以浮動
浮動帶來的問題，高度塌陷  浮動元素沒有將父級標籤撐開
解決方案：1.設定高度撐開父標籤
				  2.清除浮動影響  會自動將父標籤撐開為浮動標籤的高度

#nav_box>.nav{
	float: left;
		width: 200px;
		background-color: cyan;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 15px;
		font-weight: bold;
		font-family: 楷書;
	}
	#nav_box{				
		width: 1200px;
		margin: auto;
	}
	#nav_box>.nav:hover{
		background-color: #0000FF;
	}

<div id="nav_box">
	<div class="nav">首頁</div>
	<div class="nav">關於我們</div>
	<div class="nav">聯絡我們</div>
	<div class="nav">時事新聞</div>
	<div class="nav">時事熱點</div>
	<div class="nav">產品名稱</div>
	<div style="clear: left;"></div>
</div>

3.CSS定位

允許定義的標籤相對於其正常位置，或者相對於父級標籤，
另一個標籤甚至瀏覽器視窗本身而出現的位置
定位：必須找準一個參照物
（1）相對定位
		相對於原來的位置移動，移動後原來的位置還被佔用（沒有脫離文件流）
		position:relative（開啟相對定位）
		開啟了相對定位沒有設定偏移量標籤位置不動
		與其他標籤位置重疊時會提升一個層級，不會改變標籤性質

.div1{
	width: 100px;
		height: 100px;
		background-color: #008000;
		position: relative;
		left: 100px;
		top: 10px;
	}
	.div2{
		width: 100px;
		height: 100px;
		background-color: #0000FF;
	}

<div class="div1">
	div1
</div>
<div class="div2">
	div2
</div>

4.絕對定位

posotion:absolute（開啟絕對定位）
開啟了絕對定位的標籤就會脫離原來的文件流，沒有設定偏移量，位置不變
絕對定位是以離他最近的開啟了定位的祖先標籤進行定位
這兩個條件有一個不滿足，就會以瀏覽器的視窗為參照物定位，會改變標籤的性質
行級標籤->塊級標籤
z-index  設定定位標籤的層級  z軸

.div1{
	width: 100px;
	height: 100px;
	background-color: #00FFFF;
	position: absolute;
	left: 100px;
	top: 100px;
}
.div2{
	width: 100px;
	height: 100px;
	background-color: #7FFF00;
}
.div{
	width: 200px;
	height: 200px;
	background-color: red;
	position: relative;
}
.div3{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
	left: 50px;
	top: 50px;
}
span{
	background-color: #F0E68C;
	position: absolute;
	width: 100px;
	left: 100px;
}

<div class="div">
	<div class="div1">
		div1
	</div>
	<div class="div3">
		div3
	</div>
</div>
<div class="div2">
	div2
</div>
<span>
	span
</span>
aaa

5.固定定位

position:fixed

相關文章