出現原因：樣式寫在骨架裏面，會變得很複雜。應該達到——結構就應該寫結構。外觀就應該寫外觀。
CSS:控制外觀顯示樣式

CSS書寫位置

內部樣式表（樣式與結構部分分離）

<head>
	...
	<style>
		選擇器{屬性：值;} /*選擇器----選擇標籤*/
		th{color: skyblue;}
		td{font-size:14px;} /*讓所有的td都改爲14px*/
		tr{height:30px;}
	</style>
</head>

行內樣式式（內斂樣式）（結構與樣式完全未分離）
在標籤名後面直接寫style屬性。
<h4 style="color: pink;font-size:25px">青春！你好</h4>
#ccc:爲灰色
外部樣式表（工作主要使用）——新建css文件（樣式與結構徹底分離），故耦合性大大降低。

<head>
...
<link rel="stylesheet" href="css文件" />
</head>

		th{color: skyblue;}
		td{font-size:14px;} /*讓所有的td都改爲14px*/
		tr{height:30px;}

兩個問題

兩個單元格，若點擊其中一個單元格，另外一個單元格的文本框能夠輸入——通過for來建立連接

<tr>
	<td>
		<label for="pass">密碼</label>
	</td>
	<td>
	<input type="password" id="pass" />
	</td>
</tr>

css基礎選擇器

css樣式衝突時，只看樣式定義的位置（後定義覆蓋前定義），並不是看class裏面排列的位置

標籤選擇器
標籤選擇器可以把某類標籤全部選出來，故不能進行差異化。
類選擇器——上面點聲明，下面class調用(聲明存在此樣式，誰用誰來拿) {爲了解決標籤選擇器的無法差異化的問題}。

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	/*上面點聲明，下面class調用(存在此樣式，誰用誰來拿)*/
	<style>
		.suibian{
			color:blue;
	</style>
	}
</head>
<body>
	<div>我是類選擇器</div>
	<div class="suibian">我是類選擇器</div>>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style>
		span{
			font-size:150px;
		}
		.g{
			color:skyblue;
		}
		.o{
			color:red;
		}
		.oo{
			color:orange;
		}
		.l{
			color:green;
		}
		.font20{
			font-size:20px;
		}

	</style>
</head>
<body>
 	<span class="g font20">G</span> /*多類名選擇器*/
 	<span class="o">o</span> 
  	<span class="oo">o</span>
    <span class="g">g</span>
    <span class="l">l</span>
    <span class="o">e</span>
</body>
</html>

id選擇器——上面#聲明，下面id調用

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	/*上面點聲明，下面class調用(存在此樣式，誰用誰來拿)*/
	<style>
		#suibian{
			color:blue;
	</style>
	}
</head>
<body>
	<div>我是類選擇器</div>
	<div id="suibian">我是類選擇器</div>>
</body>
</html>

通配符選擇器——*，匹配所有的標籤；在實際開發中基本上不用。
電腦上自帶兩個通配符：*（表示多個字符），?（表示一個字符）

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	*{
		color:pink;
	}
</head>
<body>
	<div>我是文字</div>
	<p>我是文字</p>
	<span>我是文字</span>
</body>
</html>

注意css中取名

一般採用字母，數字，下劃線。首字符爲字母
加下劃線的名字是js採用的，而css中一般只使用字母+數字
class相當於給標籤取了一個名字；而id在整個網頁中使唯一的，一個標籤的id是唯一的。（故兩個選擇器的區別在於使用次數）;id選擇器主要是爲js準備的，故一個標籤可以既可以使用class，又可以使用id。class選擇器使用比id選擇器更多。
css註釋用/*.....*/的形式。

css的樣式屬性

font-size：字號大小，可以使用相對長度單位和絕對長度單位。相對長度單位有：em——相對於當前對象內文本的字體尺寸；px——像素，最常用。絕對長度單位：in——英寸；cm——釐米；mm——毫米；pt——點。
font-family：字體。常見字體有：宋體，微軟雅黑（microsoft yahei），黑體等。
css Unicode字體（此字體兼容性最好）
把規定的字體採用Unicode編碼表示。例如黑體—“SimHei”—\9ED1\4F53
font-weight：字體粗細
字體加粗的標籤<b>,<strong>，取值爲normal(正常字體，number值爲400)，bold（粗體，number值爲700），number（font-weight:700;）
font-style：字體風格
字體傾斜標籤<i>,<em>。取值爲：normal（正常字體），italic（斜體）。

綜合設置字體樣式(必須按照順序來寫)

選擇器{font: font-style font-weight font-size/line-height font-family;}——h1{font: 400 25px "宋體"},若沒有設置屬性時，則可以省略，但必須保留font-size,font-family屬性。

技巧

網頁中普遍使用14px+，儘量使用偶數
各種字體以英文狀態逗號隔開，中文字體需要加引號，英文字體無需加引號(若英文字體包含了非字符符號時，也必須加引號) font-size="microsoft yahei", "Times New Roman";
儘量使用系統默認字體，保證用戶的瀏覽器中都能正確顯示。
瀏覽器如何選擇字體——在font-family規定的字體中，對比瀏覽器是否存在此字體，若第一個字體存在，則用第一個字體；若第一個不存在，則對比第二個字體。若發現瀏覽器中都沒有font-family規定的字體，在瀏覽器使用默認的字體。

css外觀樣式

color：文本顏色。常見三種寫法：

預定義的顏色值，例如red，green，blue等
十六進制：如#FF0000（rgb表示{兩個一組}——紅,可以簡潔寫法，一組中兩個相同可以只寫一個，則#ff0000變爲#f00）
rgb代碼,，如紅色表示：rgb(255,0,0)或rgb(100%,0%,0%)

line-height：行間距（給誰改行間距——段落，故對p標籤）
屬性值單位有：px，em，和百分比；一般情況下比字號大7，8個像素即可。
text-align：水平對齊方式（是讓盒子中的內容水平對齊，而不是讓盒子水平對齊）
left(默認),center,right
text-indent：首行縮進，單位爲em，1em就是一個字的距離。text-indent: 2em;
text-decoration：文本裝飾（主要用線來做），其值爲：none（默認值），underline，overline，ling-through

複合選擇器（把基本選擇器進行組合）

後代選擇器（包含選擇器——外層標籤寫前面，裏層標籤寫後面，中間用空格分割）;後代選擇器是代表所有的後代，並不是指直接一代。
div p{color:pink;}——div裏面p標籤中內容的顏色改成pink

<head>
	...
	.jianlin p{
		color:purple;
	}
</head>
<body>
	<div class="jianlin"> <p>王</p>
	</div>
</body>

子代選擇器：只選擇直接一代
ul li > a{color="red";}——a是li的直接一代。而li不一定是ul的直接一代。
交集選擇器：（並且）

<head>
	...
	div.jianlin{
		color:purple;
	}
</head>
<body>
	<div class="jianlin"> <p>王</p> #只是這個變顏色
	</div>
	<div>你好<.div>
	<p class="jianlin">你好</p>
</body>

並集選擇器

<head>
	...
	div, p, span{
		color:purple;
	}
</head>
<body>
	<div class="jianlin"> <p>王</p> #只是這個變顏色
	</div>
	<div>你好<.div>
	<p class="jianlin">你好</p>
	<span class="jianlin">你好</span>
</body>

鏈接僞類選擇器

以：開頭。例如爲了讓鼠標放在鏈接上變顏色。(這四個順序書寫時不能顛倒) {記憶lv hao}

:link——未訪問的鏈接
:visited——已訪問過的鏈接
:hover——鼠標放上去的鏈接
:active——鼠標按上去的鏈接

a:link{
	color:#3c3c3c;
	font-size:25px;
	text-decoration:none;
	font-weight:700;
}

標籤的分類（按照顯示形式，顯示形式可以相互轉換，使用display屬性）

塊級元素（block）：獨自佔一整行（特點：高寬有效）
行內元素(inline)：不獨佔一行，多個可以在一行（特點：高寬無效，默認的寬度爲內容本身的寬度；行內元素裏只能放文本或其他行內元素，a標籤除外），a,strong,b,em,span等
行內塊元素（inline-block）：既有行元素特點，又有塊元素特點。input，img，td。（特點：一行可以放多個，中間有空隙隔開；寬高可以設置）
若想要行內元素有大小，則需要display屬性，將行內元素轉爲塊元素

span{
	width:150px;
	height:150px;
	backgroud-color:green;
	display:block;#把行內元素顯示變爲塊元素顯示
}
a:hober{
	backgroud-image:url()背景圖片
}

注意

每個標籤都是一個盒子，都可以給盒子設置寬高，背景，顏色邊界等。
行內元素，行內塊元素可以當做文本來看。
行高（line-height）等於盒子的高度，可以讓單行文本垂直居中。
p，h1…h6，dt爲文字組成的塊級元素，一般不能放其它塊級元素
鏈接裏面不能再放鏈接
a標籤雖然是行內元素，但裏面可以放塊級元素
選擇器的嵌套層級不能超過3個，位置靠後的限定條件應儘可能精確

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<style>
		.nav a{
			width:120px;
			height:50px;
			background-color:pink;
			display: inline-block;
			background-image:url(image0.png);
			text-align: center;	
			color:#fff;
			text-decoration: none;
			line-height: 50px;#若未給行高（行高默認爲字體的大小），則盒子的上距離和下距離默認爲0，只有內容高度
		}
		.nav{
			text-align: center;
		}
		.nav a:hover{
			background-image:url(image1.png);
		}
	</style>
</head>
<body>
 <div class="nav">
 	<a href="#">網站導航</a>
 	<a href="#">網站導航</a>
 	<a href="#">網站導航</a>
 </div>
</body>
</html>

行高問題（真正行由四條線組成）

行高：基線與基線之間的距離（若全爲中文：則可以用底線到底線的距離來測量）
一個完整的盒子由三部分組成（行高（line-height）等於盒子的高度，可以讓單行文本垂直居中）{ 上距離與下距離是相等的：故上距離=（盒子高度-字體大小）/2}——行高由三部分組成：上距離+內容高度+下距離

css三大特性

層疊性（瀏覽器處理衝突能力，只針對權重相同情況）——只層疊衝突的樣式，不衝突則顯示前面對應的某個具體的樣式
後面寫的樣式把前面寫的樣式覆蓋掉（是有樣式定義的位置決定的）

<style>
	div {
 		color:red;
 		font-size:25px;
	}
		div {
 		color:pink;#只重疊衝突的，而字體大小沒有衝突，則顯示上述定義的字體大小
	}
</style>

繼承性：子標籤會繼承父標籤的某些樣式。例如文本相關的屬性（text-，font-，line-，color等）

<head>
	<style>
		.jianlin {
			color:pink;
		}
	</style>
</head>
<body>
	<div class="jianlin">
		<p>
			哈哈
		</p>
	</div>
</body>

優先級

<head>
	<style>
		.yase {
			color:green;
		}
		div {
			color:red;
		}
	</style>
</head>

<body>
	<div class="yase">哈哈 </div>#顯示爲綠色
</body>

選擇器的權重（由於計算機是從右往左算）

繼承或者*的貢獻值爲：0，0，0，0
每個標籤貢獻值：0，0，0，1
每個類，僞類貢獻值：0，0，1，0
每個id貢獻值：0，1，0，0
每個行內樣式貢獻值：1，0，0，0
!important的貢獻值：無窮大

權重是可以疊加的(沒有進位)

div p { #兩個標籤，權重爲：0002
	color: green;
}
p{  0001
	color:red;
}
.yase { 0010
	color:blue;
}
.nav ul li   0012
a:hover   0011

<head>
	<style>
		.c1 .c2 div { 0021
			color: blue;
		}
		div #box3 { 0101
			color:blue;
		}
		#box1 div{ #div標籤也可以指代嵌套在最裏面的類名爲c3的div，故不用考慮繼承的問題：權重爲0101
			color: yellow;
		}
		div p {
		 color:pink
		}
	</style>
</head>

<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				文字 #顯示顏色爲黃色
				<p>
					你好 #顯示爲粉紅色（由於前面都是繼承，注意後代的書寫權重會進行疊加）
				</p>
			</div>			
		</div>		
	</div>
</body>

css背景

background-repeat：屬性值repeat（默認值，縱向和橫向平鋪），no-repeat（不平鋪），repeat-x（水平上平鋪）repeat-y（縱軸上平鋪）
background-position：屬性值爲一對值x y；其中x取值爲：left center right；y屬性值：top center bottom。backgroud-position: left top; 若只寫一個屬性值，另外一個默認是center；方位名詞書寫是沒有順序的；position後面也可以跟數值（單位爲px），這種方式必須有順序；方位名詞和數值可以混合使用。
background-color
background-image
background-attached：設置背景圖像是隨內容滾動還是固定的，屬性值：scroll（默認值），fixed

背景的簡寫

背景顏色，背景圖片地址，背景平鋪，背景滾動，背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0;
background: #000 url(img1.jpg) no-repeat fixed center top

css3(高版本瀏覽器支持)

背景透明
background: rgba() red,green,blue,alpha(代表透明度，0-1（1：不透明）)
圓角邊框
border-radius: 50px（內接圓的形式——正方形：對應變長的一半時變成一個圓）；也可以控制四個角
border-radius:50%——表示寬度像素的50%。
border-radius:1px 2px 3px 4px——左上角爲1px；右上角爲2px；右下角爲3px；左下角爲4px。
盒子陰影 box-shadow
box-shadow: 水平陰影（h-shadow，必需：正值往右走，負值往下走）垂直陰影（v-shaodw，必需：正值往下走，負值往上走）模糊距離（blur：虛實）陰影尺寸（spread：影子大小）陰影顏色（color）內/外陰影（inset）

盒子模型（css三大模塊：盒子模型，浮動，定位）

盒子邊框 border：屬性border-width(邊框粗細)，border-style（邊框樣式——例如實線，虛線等：none（無邊框，默認），solid（實線邊框），dashed（虛線邊框），dotted（點線）），border-color（邊框顏色）。其連寫形式爲：border:1px solid red
border-top（上邊框），border（四邊框），border-bottom（底邊框），border-left，border-right。
table中存在獨特的屬性：border-collapse: collapse（相鄰邊框合併）

<head>
	<style>
		table {
			width: 500px;
			height: 300px;
			border: 1px solid red;
		}
		td {
			border: 1px solid red;
			text-align: center;
		}
		table, td {
			border-collapse: collapse; #合併相鄰邊框（表格與單元格都要合併）
		}
	</style>
</head>
<body>
	<table cellpadding="0" cellspacing="0">
		<tr>
			<td> 天王蓋地虎</td>
			<td> 天王蓋地虎</td>
			<td> 天王蓋地虎</td>
		</tr>
		<tr>
			<td> 天王蓋地虎</td>
			<td> 天王蓋地虎</td>
			<td> 天王蓋地虎</td>
		</tr>
	</table>
</body>

內邊距（盒子邊框和盒子內容之間的距離）padding
{有些地方不方便給寬時（例如字符個數發生變化），我們採用padding}
padding(四內邊框)，padding-top（上內邊框），padding-bottom，padding-left，padding-right
padding: 10px 20px;——上下10，左右20
padding: 20px;——上下左右20
padding: 10px 20px 30px;——上10，左右20，下30
padding: 10px 20px 30px 40px;——上10，右20，下30，左40（順時針）

<!DOCTYPE html>
<html>
<head>
	<title>新浪導航</title>
	<style>
		.nav {
			height: 50px;
			border-top: 3px solid #ff8500;
			border-bottom: 1px solid #edeef0;
			background-color: #fcfcfc;
		}
		.nav a {
			height: 50px;
			/*background-color: pink;*/
			display: inline-block;
			line-height: 50px;
			text-decoration: none;
			color:#4c4c4c;
			padding-left: 18px;
			padding-right: 18px;
			font-size: 12px;	
		}
		.nav a:hover {
			background-color: #edeef0;
			color: #ff8400;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">首頁</a>
		<a href="#">新聞客戶端</a>
		<a href="#">設置首頁</a>
	</div>
</body>
</html>

內邊距存在問題：

若盒子的寬度固定，但爲盒子增加padding時，會讓盒子的總體寬度變大（padding會撐開帶有weight和height的盒子）——一般盒子的大小不允許改變（保證總體不變，通過計算來得到盒子高度不變）{border也會撐開盒子，故爲了保證總體不變，也要減去border的寬度，來得到規定的盒子寬度。}
如果盒子沒有指定寬度，則會和父級塊元素一樣寬，且子塊元素padding不會影響父級塊元素（級子塊元素的寬度不會撐開）。

外邊距（盒子與盒子之間距離）——margin
margin-left，marg-right，marg-top，margin-bottom

# 先做大盒子，再裝內容；再裝內容之前注意有內邊距，邊框——這兩個把盒子變大（故先開始計算出規定盒子的大小）
<!DOCTYPE html>
<html>
<head>
	<title>新聞列表</title>
	<style>
		* { #清除內外邊距，但*在瀏覽器執行較慢（由於會把所有的標籤都會解析一遍），故一般採用並列標籤的寫法。
			margin: 0px;
			padding: 0px;
		}
	.article {
		width: 380px; #總寬爲380+30
		height: 263px; #總高爲264+20
		border: 1px solid #ccc;
		margin: 100px;
		padding:20px 15px 0;
	}
	.article h4 {
		color: #202026;
		font-size: 20px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5px;
		margin-bottom: 12px;
	}
	li {
		list-style: none;#取消li標籤前面的小點
	}
	.article ul li {
		height: 38px;
		line-height: 38px;
		border-bottom: 1px dashed #ccc;
		text-indent: 2em;
	}
	.article a {
		font-size: 12px;
		color: #333;
		text-decoration: none;
	}
	.article a:hover {
		text-decoration: underline;
	}
	</style>
</head>
<body>
<div class="article">
	<h4>
		最新文章/New Articles
	</h4>
	<ul>
		<li>
			<a href="#">網頁設計</a>
		</li>
		<li>
			<a href="#">後端開發</a>
		</li>
	</ul>
</div>
</body>
</html>

外邊距合併問題

相鄰塊元素垂直合併——解決（避免即可——只需定義一個）
若上面的塊元素定義了margin-bottom，下面的塊元素定義了margin-top；則邊距是瀏覽器採用兩者最大的解析。並不是兩者相加。
嵌套塊元素垂直外邊合併
內部寬元素定義了margin-top時，會自動把外部塊元素也向下平移margin-top的值。——解決方法兩種：1. 給外部塊元素指定padding-top或border-top（指定上邊框：有上邊框即可）即可{缺陷：都撐開盒子}；2. 爲外部塊元素添加overflow:hidden（此方法常用）

<!DOCTYPE html>
<html>
<head>
	<style>
	.father {
		width:500px;
		height:500px;
		background-color:pink;
		/*
		1. padding-top:50px; #son總共會向下平移100，由於son中的margin-top定義的50
		2. border-top:1px solid pink; #son會向下平移100
		3.
		*/
		overflow: hidden;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: purple;
		margin-top: 50px; /*#若前面沒有上述三種方法中的一種，則父，子塊元素都會向下平移*/
		margin-left: 50px;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>

</html>

盒子居中對齊

實現方式
margin: 0 auto——上下是0，左右是auto （auto：代表自動充滿，而且上下auto是不起效果的）
margin: auto——左右居中
實現要求

必須是塊級元素
盒子必須指定寬度（若未指定寬度，則寬度與瀏覽器一樣寬）

常見要求

插入圖片，我們用的比較多的是產品展示
背景我們一般用於小圖標背景或超大背景圖
盒子佈局穩定性：width>padding（會影響盒子的大小）>marign（margin有外邊框合併問題）

浮動（float）——讓多個div盒子一行顯示

普通流/標準流（normal flow）

網頁內標籤元素正常從上到下，從左到右排列

float

設置浮動屬性的元素會脫離標準流的控制，移動到父元素中指定位置的過程
屬性值：left（向左浮動），right，none（默認值）

浮動內幕特性（盒子浮起來，漂浮在其它盒子上面）

浮動脫離標準流，不會佔位置，會影響標準流。只有左右浮動（爲了複雜的佈局，有時會採用父級div來佔位置）
浮動找最近的盒子對齊，且浮動跨越不了內邊距，及邊框。
浮動排列位置跟上一個元素（塊級元素）有關係：上一個盒子浮動，下一個盒子也浮動，則兩個盒子排列在一行；上一個盒子不浮動，下一個盒子浮動，則浮動盒子按照標準流位置排列
浮動默認讓元素（標籤）具有行內塊元素的特性。

版心和頁面佈局

版心也稱爲可視區：網頁主題內容所在的區域，一般在瀏覽器窗口中水平居中顯示。常見寬度值：960px，980px，1000px等

佈局流程

確定頁面的版心（可視區）
分析頁面的行模塊，以及每個行中的列模塊
製作html結構
css初始化，然後運用盒子模型的原理，通過div+css局部來控制網頁的各個模塊。

頁面常見結構

一列固定寬度且居中
兩列左窄右寬型

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		.top {
			height: 80px;
			width: 898px;
			background-color: #eee;
			border: 1px dashed #ccc;
			margin: 0 auto;
			padding: 0px;
		}
		.banner {
			height: 120px;
			width: 898px;
			background-color: #eee;
			border: 1px dashed #ccc;
			margin: 0px auto;
		}
		.main {
			height: 200px;
			width: 900px;
			margin: 0 auto;
		}
	   .left {
			height: 200px;
			width: 300px;
			background-color: skyblue;
			border: 0px dashed #ccc;
			float: left;
		}
		.right {
			height: 200px;
			width: 600px;
			background-color: blue;
			border: 0px dashed #ccc;
			float: left;
		}
		.fonter {
			height: 80px;
			width: 898px;
			background-color: #eee;
			border: 1px dashed #ccc;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<dir class="top"></dir>
	<div class="banner"></div>
	<div class="main">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="fonter"> </div>

</body>
</html>

通欄平均分佈

清除浮動（清除浮動後造成的影響）

由於浮動不再佔用原文檔流的位置，它會對後面元素排列產生影響——爲了解決這些問題，此時就需要在改該元素中清除浮動（爲了解決父級塊元素事先給高度問題（很多情況下是不方便給高度））。
清除浮動本質：解決父級元素以爲子級浮動引起內部高度爲0的問題。

清除浮動方法

額外標籤法
選擇器 { clear: 屬性值;} 屬性值：left，right，both（用的最多）
在最後浮動元素末尾添加一個空的標籤，如：<div style="clear:both"></div>

.clear {
	clear:both;
	#如果清除浮動，則父親會自動檢測孩子的高度，以最高的爲準
}

<div class="clear"></div>

優點：通俗易懂，書寫方便；缺點：添加許多無意義的標籤。

父級添加overflow屬性方法
通過除非BFC的方式，來實現清除浮動。
優點：代碼簡潔；缺點：內容增多時容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。
overflow屬性的屬性值：hidden,auto,scroll （只要添加這個屬性即可，爲哪個值可以無關）
使用after僞元素清除浮動

.clearfix: after { #正常寫法
content:""
display:block
height:0
clear:both
visibility:hidden
}
.clearfix { #ie專用
*zoom:1;#如果瀏覽器看見屬性前面有*，則瀏覽器會自動略過，只有ie7以下的瀏覽器執行
}

優點：符合閉合浮動思想，結構化語義正確；缺點：使用zoom:1觸發hasLayout

使用before和after雙僞元素清除浮動

.clearfix: after, .clearfix: before  { #正常寫法
content:""
display:table
}
.clearfix: before{
clear:both
}
.clearfix { #ie專用
*zoom:1;#如果瀏覽器看見屬性前面有*，則瀏覽器會自動略過，只有ie7以下的瀏覽器執行
}

優點：代碼更簡潔；缺點：使用zoom:1觸發hasLayout。

CSS之定位（移動位置）

用的沒有浮動多，定位用的最多是做特效。
定位也是漂浮起來，可以去往任何地方。

元素的定位屬性主要包括定位模式和邊偏移兩部分。

邊偏移（你走多少距離）

邊偏移屬性：top,bottom,left,right（左右會衝突，上下會衝突；故同時只能去兩個屬性）

定位模式（定位的分類）

選擇器 {position:屬性值}
常見屬性值：static（自動定位，默認），relative（相對定位，相對於原文檔流的位置進行定位），absolute（絕對定位，相對於其上一個已經定位的父元素進行定位），fixed（固定定位，相對於瀏覽器窗口進行定位）

static
所有元素定位的默認方式，其實就是標準流的特性；無法通過邊偏移屬性來改變元素的位置。
靜態定位的唯一用處：取消定位
relative
每次移動的位置，都是以自己的左上角爲基點移動（相對自己來移動位置）
特點：可以通過邊偏移來移動位置，但原來的位置繼續佔有（與浮動的區別）
absolute
絕對定位不佔有原來的位置（與浮動一樣）；以當前瀏覽器的當前屏幕爲基準點（屏幕左上角）對齊（沒有父級時；以及存在父級，但父級沒有定位——會離開父級的盒子（與浮動的區別））；如果父級有定位，則根據最近的已經定位（絕對，相對，固定）的父元素（祖先）爲基準點進行定位。
**子絕父相（最常用定位方法）：**如果子級是絕對定位，則父級要用相對定位（若父級採用相對定位，則沒有佔用位置）
fixed
固定定位不佔有原來的位置（與浮動一樣）。定位位置只與瀏覽器的屏幕爲基準點（屏幕左上角）對齊。

疊放次序（z-index）

當多個元素同時設置定位時，定位元素之間有可能會發生重疊。（都有定位時，後面的會覆蓋前面的）。故若爲了想特定的想放在上面，採用此屬性（此屬性值沒有單位）
z-index: 1，z-index的默認值爲0（誰的此值最大，則誰放在最上面），且z-index只有定位的盒子纔有（相對定位，絕對定位，固定定位纔有此屬性）。

問題

加了浮動或定位的盒子採用margin: 0 auto居中對齊失效

left: 50%;
margin-left:-100px; #再移動盒子的一半（由於定位是按點算的，而上面一句話代表盒子的左上角點在居中位置）
top：50%;
margin-top:-100px;

跟浮動一樣，元素添加絕對定位和固定定位後，元素模式發生轉換，成爲行內塊模式（行內塊的寬度與高度與內容有關）
解決方法——不用轉換模式，直接給高度和寬度即可
不用給單位的屬性
z-index，font-weight
爲了讓相鄰的盒子邊寬一致
解決方法：讓浮動的元素左移邊框的像素。
如果是標準流，可以設置相對定位把想要顯示的元素浮動上來；若爲相對定位元素，可以設置z-index屬性來顯示想要的元素。

前端人生——CSS（盒子，浮動，定位）