1.浮动的特性
	1.浮动的元素脱标

	2.浮动的元素互相贴靠

	3.浮动的元素由"字围"效果

	4.收缩的效果
	
	前提是标准文档流，margin的垂直方向会出现塌陷问题。
	
	如果盒子居中：margin: 0 auto;如果盒子浮动了，margin: 0 auto;就不起任何作用
	
	需求：让浮动的盒子居中
		给浮动盒子，加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子margin: 0 auto;
			.box{
				width: 400px;
				height: 300px;
				background-color: red;
			}
			.main{
				width: 100px;
				overflow: hidden;
				margin: 0 auto;
			}
			.child{
				width: 100px;
				height: 100px;
				background-color: green;
				margin: 0 auto;
				float: left;
			}
	文本水平居中：text-align:center; 
	文本垂直居中：行高=盒子的高度
	
	盒子如果浮动了，那么垂直方向上不会出现塌陷问题。
	
	
	css中有三种方式让盒子'脱表'
	
	1.浮动float
	2.绝对定位
	3.固定定位
	

	
2.常用css的属性
	中心对齐
	text-align: center;
	两端对齐
	text-align: justify;
	/*首行缩进*/
	text-indent: 2em;
	字体大小
	font-size: 14px;
	修饰文本
	text-decoration
			none;没有线
			underline;有下划线
	line-height:
		单行文本垂直居中： line-height =  height
		
		多行文本居中：
			行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

		第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

		第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
			
	ff:
		15*16+15 255
		
3.background-image
	精灵图技术
	
	
4.定位：
	默认：position:static; 静态定位
	
		position: relative; 相对定位
				  absolute;绝对定位
				  fixed;固定定位
				  
				  
	- ralative:
		如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别
		不脱标
		参考点：
			相对于原来的位置
		
		形影分离
		
		
		作用：
			1.层级提高，做压盖（不建议）
			2.布局方案 "子绝父相"的参考
			
	- absolute
		
		1.脱标：不占位置 
		2.层级提高
		
	
	参考点：
		单个盒子
		如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分）
		
		如果以bottom描述，是以浏览器的左上角为参考点
		
		
		父子盒子之间
		
		如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点