1、默认样式重置（CSS reset）
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;padding:0;font-size:12px;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
2、选择符
类型选择符：body{margin:0;font-size:12px;}
class选择符：.box1{width:100px;height:100px;} ps:class(类)选择符，可重复使用的“id”。
id选择符：#box2{width:200px;height:100px;}
群组选择符：ol,ul{margin:0;padding:0;list-style:none;}
包含选择符：body a{text-decoration:none;}
行内选择符：<a href="#" style="color:#fff"></a>
通配选择符：*{color:#foo;} ps:*表示全部标签。
伪类选择符： ps:<a>的伪类顺序固定，要死记。
a:link{color:#f00;}
a:visited{color:#666;}
a:hover{color:#F60;text-decoration:none;}
a:active{color:#000;}
ps:选择符优先级
类型 < class < id < style < js
类型 < 类型 类型
ps:同级样式默认后者覆盖前者；
名字先后顺序与样式先后顺序无关。
3、标签分三种属性
一、内联，内嵌，行内属性标签：<a>,<span>,<strong>,<em>
特性：1、默认同行可以并列同类型标签；
2、没有宽度时，内容撑开宽度；
3、不支持宽高属性；
4、不支持上下的margin和padding；
5、换行代码被解析。
二、块属性标签：<p>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<dl>,<dd>,<ol>,<ul>,<div>
特性：1、默认独占一行显示；
2、支持所有CSS命令；
3、没有宽度时，默认撑满一排
三、inline-block属性标签：<img>
特性：1、能让块在一行显示；
2、内嵌支持宽高；
3、没有宽度时，内容撑开宽度；
4、换行代码被解析；
5、IE7不支持inline-block。
属性间相互转换
display:inline 转变为行内属性
display:block 转变为块属性
display:inline-block 转变为inline-block属性
4、浮动(float)
float:left | right | none | inherit;
特性：1、能让块在一行显示；
2、内嵌支持宽高；
3、没有宽度时，内容撑开宽度；
4、换行代码被解析；
5、IE6、7支持；
6、脱离文档流，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止。
ps:float比inline-block高级；
浮动提升层级半层；
文档流：是文档中可显示对象在排列时所占用的位置。
5、清浮动（clear）
clear:left | right | both | none | inherit；
方法：1、直接给父级加高； ps：扩展性不好
2、给父级加浮动； ps:页面中所有元素都加浮动，margin左右自动失效
3、给父级加display:inline-block； ps:margin左右自动失效
4、在浮动元素下加空div； ps:IE6最小高度19px，解决后还有2px偏差。
.clear{height:0px;font-size:0px;clear:both;}
<div class="clear"></div>
5、在浮动元素下加br； ps:不符合工作中：结构、样式、行动 三者分离要求。
<br clear="all"/>
6、after伪类（现在主流方法）
.clear{zoom:1;}
.clear:after{content:"";display:block;clear:both;}
ps:给浮动元素的父级加class="clear"；
after伪类： 元素内部末尾添加内容；
:after{content"添加的内容";} IE6，7下不兼容；
zoom 缩放
触发 IE下 haslayout，使元素根据自身内容计算宽高。