一.css reset的整理。
最霸道的一句就是：*{margin:0;padding:0;}，没办法，html标签基本都带有默认的padding或者margin，所以为了统一，就只有此策略了。
更详细的css reset就是针对具体的标签订制。可以查看淘宝的css reset。
若想有所思考，可以参考此文章对css reset的反思：http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/
二.css 盒模型。
css盒模型是布局的核心。css3中针对css2.1中盒模型存在的缺点提出了两种盒模型：box-sizing:border-box 和box-sizing:content-box。
border-box算是对css2.1的一个补充吧。
我们先来看看css2.1中的盒模型概念。http://www.qianduan.net/css-box-model.html
border-box属性比较好玩，宽度和高度卡死了，盒子始终就是那么宽，那么高。css2.1中虽然没有此属性，但是有的html标签的盒模型计算就是这个原理。
请思考这个问题：
input[type="submit"]{ width:100px; line-height:30px; height:30px; padding:10px; border:1px solid #333; }
请问，input的实际宽度和实际高度是多少？（答案是100px,30px）
css2.1虽然没有支持border-box属性，但是，我们可以使用css来进行模拟该属性。一切都是基于你对盒模型的理解。
示例如下：
html：
<div class="box"> <div class="inner"> <h1>内容</h1> </div> </div>
css：
.box { width:100px; height:100px; } .box .inner { padding:10px; border:2px solid orange; }
三.css布局。
在讲布局前，我们可以了解下什么是普通文档流：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2994612
布局通用的就是float,position,再加上display:inline-block。当然此处不讲css3中的布局。
先说浮动float。float有三个属性，left,right,none.分别代表向左浮动，向右浮动和不浮动。
通常后者float:none;是用来进行样式重置的。万不得已啊！
下面仔细说说浮动的特性：
- 浮动的盒子脱离了正常文档流。
- 浮动的盒子宽度自适应（没定义宽度的情况下）
以上两点足以概括浮动了。
由于浮动的以上两点特性，在日常的工作中，你会碰到如下的问题：
- 浮动闭合问题
- 浮动清除
- IE6的各种诡异问题。
再说说定位。
position有四个属性，static，fixed，relative，absolute。继承的属性不说。
着重讲讲fixed,relative,absolute.
在这里面，position被设置为fixed和absolute属性时，该元素是脱离了正常文档流。fixed,relative,absolute 三者定位需要参照物，并且会产生层叠值，层叠值默认为0，但是高于正常文档流。
- position:fixed。其实fixed从含义上来看，是固定的。但是，它实质是一个绝对定位的特例。定位的参照物是浏览器的窗口。如今，这种应用很常见，当页面超过一屏时，滚动页面，顶部的导航条始终是固定的，内容则滚动变化，可以给用户一个良好的体验。
- position:absolute。绝对定位，需要一个父系参照物作为定位的参考依据，就近参考。绝对定位有自适应宽高的特点。通常需要把父参考系定位为position:relative 或者position:absolute，这样才算它的参照物。
- postion:relative。相对定位，相对定位的参照物是元素本身。该元素没有脱离正常文档流，并且占用了自己的位置。通常可以用该属性进行页面元素位置的微调。
定位其实用的比较多，相对定位和绝对定位配合使用，就可以创造出灵活多变的布局，这点可以看看css zen garden。
注意事项：
1.层叠值z-index在一开始设置，请从1开始。
2.子元素层叠值无法跨越父级层叠值。
更多详见此文：http://bbs.blueidea.com/forum.php?mod=viewthread&tid=2733320
再说说display:inline-block吧。
浮动这东西，用多了蛋疼。会产生很多问题，所以，display:inline-block有时会派上用场。在浏览器兼容性上，该属性的使用还是受到了比较大的限制。
更多详见：http://ued.taobao.com/blog/2012/08/inline-block/
以上布局的知识可参考：http://www.w3.org/TR/CSS21/visuren.html#q15