注：在做这节教程的时候，我又上网查了相关资料，看了大量的文章，做了大量的测试，最后总结出下面这些文字，洋洋洒洒一整篇，不过需要大家一句话一句话的看，一定要仔细喽！还有对于课程中的说的，最好一边看，一边练，不练绝对看不懂！ 定位(position) 布局页面说容易非常容易，只需要记住这节课最后一句话就可以了，说困

CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素

在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。 注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼

我们先把上节课最后总结一句话拿出来 如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。 如果你还是不能太明白这句话，我们就做个实例，把我

IE6的某些元素在表现上有多余的一些空白间隙，或者更形象的说是外边距（margin），要么是margin-top，要么是margin-bottom，当然还有margin-left，margin-right。这个在表单元素中特别常见。即使我们的reset css已经将这些元素的margin值设为0。 可以看一个实例：比如们想模拟一个双边框的文本框，如图： 看html代码： 1.s

写完第七课，因为时间问题没有继续写第八课有关浏览器兼容方面的文章，以为大家可以自己掌握这方面的知识，不过发现有很多同学找了很多资料，很多文章去研究，费时费力的，效果也不好，今天是星期六，我呢就再给大家补写这篇教程，带领大家用最短的时间掌握CSS Hack！ 说到浏览器兼容性问题，就必须说CSS Hack！提到Hack大家

在现在项目产品的前端开发中随着交互的增多，再加上html结构的语义化要求，元素的层级关系越发重要了，经常页面会出现页面某些元素会被其他元素遮盖，很多时候我们通过position:relative或position:absolute，及z-index值来改变元素的层级，但是z-index过多或其值如果没有充分考虑的话，元素的层级关系会非常复杂。我这里只

在我们写样式的时候，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工