CSS的浮動

浮動分為左浮動（float: left; ）和右浮動（float: right;），浮動元素會脫離文件流

.box1{
	width: 200px;
	height: 200px;
	background: red;
	<!--元素浮動會脫離原來的文件流，後面不浮動的元素會佔據這個位置-->
	float: left;		//左浮動
	flaot: right;		//右浮動
}
.box2{
	width: 250px;
	height: 200px;
	background: blue;
}

<div class="box1">box1</div>
<div class="box2">box2</div>
 

停止浮動元素：
1.碰到父級元素的邊界會停下來，靠近邊界停止
2.碰到前面的浮動元素會停止，緊跟在浮動元素之後排列
3.當上面沒有浮動元素的時候不會再浮動

浮動的塊元素會自動變成行內塊元素，並在一行顯示
.box1{
	<!--當box1網左浮動，碰到他的父級元素邊界就會停下來-->
	width: 200px;
	height: 200px;
	backgroud: red;
	float: left;
}
當兩個塊元素都左浮動時，box2碰到前面的浮動元素box1時會停止，緊跟在box1後面排列
.box2{
	width: 200px;
	height: 200px;
	backgroud: blue;
	float: left;
}
當box4開始左浮動，碰到上面的box3它不是浮動元素，那麼box4就不會再浮動
.box4{
	width: 200px;
	height: 200px;
	backgroud: pink;
	float: left;
}
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
 

當父元素沒有設定固定高度，子元素全部浮動的時候，脫離文件流，父級元素的高度就無法被撐開

當父元素沒有設定高度，他會根據內部子元素的高度顯示其高度，當子元素全部開始浮動的時候，他的高度就不再撐開
	解決方法是在父級元素內新增：overflow: hidden;
.box{
	width: 500px;
	border: 1px solid black;
	overflow: hidden;
}
.box1{
		width: 200px;
		height: 200px
		background: red;
		float: left;
}
<div class="box">
	<div class="box1"></div>
</div>
 

當父級元素的寬度不夠顯示的時候，浮動元素會換行顯示

清除浮動。overflow: hidden; 也可以清除浮動
.box1{
	width: 200px;
	height: 200px;
	background: blue;
	float: left
}
給box2使用clear: both; 清除左右兩邊的浮動，box2元素就不會在自動補在box1的下面，它會換行顯示，之後的box3等還會緊跟在box2之後排列
.box2{
	width: 200px;
	height: 200px;
	background: blue;
	float: left
	clear: both;
}
.box3{
	width: 200px;
	height: 200px;
	background: blue;
	float: left
}


<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>

定位

絕對定位和固定定位的塊元素和行內元素會自動轉化成行內塊元素

CSS的使用position屬性來設定定位：

• position: relative; 相對定位：以元素本身當前位置為參考點進行偏移，不會脫離原本的文件流，佔據文件流的位置

.box1{
	width: 200px;
	height: 200px;
	backgroud: red;
	position: relatice;
	<!--距離上方100px，左方100px進行偏移->
	left: 100px;
	top: 100px
}
<div calss="box1"></div1>

• position: absolute; 絕對定位。以有定位屬性的父級元素為參考進行偏移，如果父級沒有定位屬性，那就一直向上找，直到某個祖先級有定位屬性，那就以那個祖先為參考點。如果都沒有，那就以body的位置為參考點進行偏移
• 會脫離文件流，不佔據文件流的位置

.box1{
	width: 200px;
	height: 200px;
	backgroud: red;
	position: absolute;
	<!--以有定位屬性的父級位置為參考，距離上方100px，左方100px進行偏移->
	left: 100px;
	top: 100px
}
<div calss="box1"></div1>

• position: fixed; 固定定位，以瀏覽器的視窗為參考進行定位，拖動滾動條也不會影響放置的位置。一般用於固定在視窗某個地方的東西

.box1{
	width: 100px;
	height: 50px;
	background: blue;
	position: fixed;
	bottom: 50px;
	right: 50px;
}

<div class="box1">返回頂部</div>

• 定位的層級關係：

定位可能會產生覆蓋的情況，後面定位的元素會覆蓋前面定位的元素，可以使用 z-index: xx; 來改變第一個定位元素的層級，讓它顯示在最上面
.box1{
	width: 200px;
	height 200px;
	background: red;
	position: relative;
	left: 100px;
	left: 100px
	z-index: 2;
}
這個時候box2元素會完全覆蓋之前的box1，只顯示box2元素的藍色，可以在box1中設定z-index:2 來改變層級，讓box1的紅色顯示在最上面
.box2{
	width: 200px;
	height 200px;
	background: blue;
	position: position;
	left: 100px;
	left: 100px
}
<div class="box1"></div>
<div class="box2></div>

簡單的移動端佈局瞭解一下

響應式佈局：建立多個佈局，分別對應多個螢幕解析度的範圍，當螢幕解析度小於某個值的時候，可以使用另一套樣式

特點：分別為多個螢幕解析度定義佈局，同時，在每個佈局中，頁面元素寬度隨著視窗調整而自動匹配

響應式佈局的程式碼：

div{
	height: 300px;
	width: 100%;
	background: red;
}
/*當瀏覽器視窗小於960的時候，div採用這個樣式*/
@media (max-width: 960px){
	div{
		width: 50%;
		background: blue;
	}
}
/*當瀏覽器視窗小於480的時候，div採用這個樣式*/
@media (max-width: 480px){
	div{
		width: 25%;
		background: blue;
	}
}
/*當瀏覽器視窗大於960px的時候，div採用此樣式*/
@media (min-width: 960px){
	div{
		background: yellow;	
	}
}