一.浮動(float)

1.文件流:是指盒子按照 html 標籤編寫的順序依次從上到下,從左到右排列,塊元素佔一行,行內元素在一行之內從左到右排列，先寫的先排列,後寫的排在後面,每個盒子都佔據自己的位置.
2.浮動的概念:所謂的浮動就是指元素脫離文件流,漂浮到文件流的上方,不會佔據位置。
3.浮動的特性:
(1).浮動元素有左浮動(float:left)和右浮動(float:right)兩種.
(2).浮動的元素會向左或向右浮動,碰到父元素邊界,浮動元素,未浮動的元素才停下來.
(3).相鄰浮動的塊元素可以並在一行,超出父級寬度就換行.
(4).浮動讓行內元素或塊元素自動轉化為行內塊元素

.
(5).浮動元素後面沒有浮動的元素會佔據浮動元素的位置,沒有浮動的元素內的文字會避開浮動的元素,形成文字饒圖的效果.
(6).父元素內整體浮動的元素無法撐開父元素,需要清除浮動.
(7).浮動元素之間沒有垂直 margin 的合併.
4.清除浮動
(1).父級上增加屬性 overflow：hidden
(2).在最後一個子元素的後面加一個空的 div,給它樣式屬性 clear:both（不推薦）
(3).偽物件選擇器:
以下的屬性content必須和after以及before使用,
父元素::after,父元素before{
content:’’;
display:table;//這是一種以css佈局呈現的屬性設定具備表格劃分的特性以及表格屬性//
}

二.定位(position)

1.定位: 設定元素在html文件流中的位置.
2.相對定位:relative 生成相對定位元素,元素所佔據的文件流的位置不變,元素本身相對文件流的位置進行偏移 .
3.絕對定位:absolute 生成絕對定位元素,元素脫離文件流,不佔據文件流的 位置,可以理解為漂浮在文件流的上方,相對於上一個設定了相對或者絕對或者固定定位的父級元素來進行定位,如果找不到,則相對於body元素進行定位.
4.固定定位:fixed 生成固定定位元素,元素脫離文件流,不佔據文件流的位置,可以理解為漂浮在文件流的上方,相對於瀏覽器視窗進行定位.
5.static 預設值,沒有定位,元素出現在正常的文件流中,相當於取消定位屬性或者不設定定位屬性.
6. inherit 從父元素繼承 position屬性的值.
7. 定位元素特性 :絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素.
8. 定位元素層級 :定位元素是浮動的正常的文件流之上的,可以用 z-index 屬性來設定元素的層級(absolute一起使用).

三.css中元素對齊的方式

1.一個div在另外一個div中的垂直居中
(1)

.wrap{
		width: 400px;
		height: 400px;
		background: pink;
		margin: 50px auto;
			//以下水平對齊方式和內聯塊元素一併使用//
		text-align: center;
		overflow: hidden;
		//padding-top: 100px;//
	 }
.con{
		//將子元素轉換成內聯塊元素,目的是為了設定水平居中顯示//
		display: inline-block;
		width: 200px;
		height: 200px;
		background: red;
		margin-top: 100px;
	}
...........
<div class="wrap">
	<div class="con"></div>
</div>

(2).大小一樣的div

.wrap1{
		width: 200px;
		height: 200px;
		background: red;
		padding: 30px;(利用padding,前提大小一樣)
	}
.con1{
		width: 200px;
		height: 200px;
		background: green;
	  }
...............
<div class="wrap1">
	<div class="con1"></div>
</div>

(3)

.wrap2{
				width: 200px;
				height: 200px;
				background: deeppink;
				margin: auto;
				position: relative;
			}
.con2 {
				width: 100px;
				height: 100px;
				background: green;
				position: absolute;
				//第一種設定垂直居中方式//
				//left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;//
				//第二種設定垂直居中的方式//
				left: 50%;
				top: 50%;
				//margin-left: -50px;
				margin-top: -50px;//
				margin: -50px 0px 0px -50px;
         }
................
<div class="wrap2">
	<div class="con2"></div>
</div>

2.設定圖片垂直居中方式
給圖片新增 vertical-align: middle;同時給父元素新增text-align: center;和 line-height

.wrap3{
				width: 400px;
				height: 400px;
				background: pink;
				/*position: relative;*/
				text-align: center;
				line-height: 400px;
			}
		img{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*設定圖片垂直居中方式*/
			vertical-align: middle;
		}
....................
<div class="wrap3">
	<img src="img/InLett-logo.png" />
</div>