出现原因：样式写在骨架里面，会变得很复杂。应该达到——结构就应该写结构。外观就应该写外观。
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（盒子，浮动，定位）