CSS差异
、 了解一下大家的html+css基础
二、 介绍div的盒状原理（见附件盒模型层次示意图.bmp）
什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子大家熟悉吧，哈哈，这里提到的盒子模型你就可以理解成现实生活中的盒子就可以了，不然怎么能起个名字叫“盒子模型”呢
好！既然和现实生活中的盒子一样，那我们想一下，生活中的盒子内部是不是空的好用来存放东西，而里面存放东西的区域我们给他起个名字叫“content(内容)”，而盒子的纸壁给他起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，我们称这部分距离叫“padding(内边距)”，如果我们需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离我们称之为"margin(外边距)"
整个盒模型在页面中所见的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，
这下盒子模型的四要素分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图
三、 介绍一下ff和ie 下 content(内容)、border(边框)、padding(内边距)、margin(外边距)之间的差异（见文档 盒子没有装满.html和 盒子装满了.html 两个文档）
四、 Div实例解析
1、 一列固定宽度
2、 一列自适应宽度
3、 一列固定宽度居中
margin属性用于控制对象的上、右、下、左四个方向的外边距，当margin使用两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。除了直接使用数值之外，margin还支持一个值叫auto，auto值是让浏览器自动判断边距
*注意几种不兼容的情况
4、 两列固定宽度
我们使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性，用于控制对象的浮动布局方式，我们的大部分div布局基本上都通过float的控制来实现布局，float的可选参数为：none/left/right。
float使用none值时表示对象不浮动，而使用left时，对象将向左浮动，例如本例中的div使用了float:left;之后，右侧的内容将流到当前对象的右侧。使用right时，对象将向右浮动，如果将#left的float值设置为right，将使得#left对象浮动到网页右侧，而#right对象则由于float:left;属性浮动到网页左侧。
5、 两列宽度自适应
6、 两列右列宽度自适应
只需将左列的宽度改为200px，右列的宽度和向左浮动去掉即可。
文章出处：标准之路
* DIV浮动IE6文本产生3象素的bug
解决方法：*html #left{ margin-right:-3px;}
7、 两列固定宽度居中
#layout有了居中的属性，自然里边的内容也能够做到居中，这里的问题在于#layout的宽度定义，将#layout的宽度设定为404px，一个对象真正的宽度是由它的各种属性相加而成，而left的宽度为200px，但左右都有1px的边距，因此实际宽度是202px，right对象同样如此，为了让layout作为容器能够装下它们两个,宽度则变为了left和right的实际宽度和，便设定为了404px，这样，就实现了二列居中显示。
*同3中注意几种不兼容的情况
8、 三列浮动中间列宽度自适应
涉及到一个绝对定位的问题
position 用于设置对象的定位方式 可用值：static/absolute/relative
如果将对象设置为position:absolute，对象将脱离文档流，根据整个页面的位置进行重新定位。当使用此属性时，可以使用top,right,bottom,left即上右下左四个方向的距离值，以确定对象的具体位置，看如下CSS：
#layout {
position:absolute;
top:20px;
left:0px;
}
如果#layout使用了position:absolute;将会变成绝对定位模式，与此同时，当设置top:20px;时它将永远离浏览器窗口的上方20px，而left:0px;将保证它离浏览器左边距为0px。。
文章出处：标准之路( http://www.aa25.cn/div_css/268.shtml)
9、 两列高度自适应
10. 横向导航菜单以及美化
*display:block;
display:block是这里的重点，它使得a链接对象的显示方式由一段文本改为一个块状对象，和div的特性相同，div默认状态下是一个块状对象，a链接对象默认状态下是一个普通文本——内联对象，这样就没有办法使得a链接对象能够像一个方块状按钮一样去运作，使用display:block之后，a链接对象将能够像div和其它元素一样成为一个块状对象（block），就可以使用css外边距、内边距等属性给a链接标签加上一系列的样式了。
*#nav {margin:0; background:#CCCCCC;width:854px; height:26px; }
将height:26px;去掉会发现在IE7和FF下面背景没有了而在IE6下面背景是存在的
11. 纵向导航菜单以及美化
12、div内容垂直居中问题 （见文档 垂直居中问题.html）
将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。对图片和图文混排不适用；这个时候还是乖乖的用padding来解决
五、 常见问题
1、区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
2、ID和class的区别
ID在一个页面里是唯一的，而clas s可以在页面中多次使用。
3、border正确缩写
不论是ie 还是ff对css的缩写都有一小点问题，比如:border: 0xp solid #fff;两个浏览器支持都没有问题，但如果四个边的magin不同情况下，就不能用这种缩写了，无论是ie还是ff又会出现边界解释错误，而导致页面变形。
正确缩写：
border-width:0px 1px 2px 3px;
border-style:solid; border-color:#fff;
4、display:inline（见文档ie产生的双倍距离.html）
用于解决浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table
5、DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
6、float的div闭合;清除浮动;自适应高度;
① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
作为外部 wrapper 的 div 不要定死高度
为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
7、IE6下为什么图片下有空隙产生 （见文档 图片下面有空隙.html）
解决这个BUG的方法也有很多,
最简单的解决办法1、.tu img{vertical-align:top}并应用到图片层上
2、.tu img{display:block}并应用到图片层上
3、改变html排版即img和div标签之间不要换行
8、如何对齐文本与文本输入框 （见文档 对齐文本与文本输入框.html）
加上 vertical-align:middle;
<style type="text/css">
<!--
input {width:200px; height:30px;border:1px solid red;vertical-align:middle; }
-->
</style>
9、怎么样才能让层显示在FLASH之上呢 （见文档 层显示在FLASH之上.html）
解决的办法是给FLASH设置透明
<param name="wmode" value="transparent" />
这个通常会在漂浮广告的时候会用到
10、为什么FF下文本无法撑开容器的高度
方法一：标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,
那我又想固定高度,又想能被撑开需要怎样设置呢？
办法就是去掉height设置min-height:200px;
这里为了照顾不认识min-height的IE6
可以这样定义: { height:auto!important; height:200px; min-height:200px; }
方法二：同时写上min-height和_height才行。否则很容易出现当内容多余div需要将div撑高的时候文字会溢出
11、clear:both应用(见文档clear-both.html)
在div_3的样式中加上clear:both;即可看到想要的效果
12、定义2px高的div
Div{ height:2px; width:1000px; background:#2A5E7D;overflow:hidden}
13. !important
在CSS的使用中，遇到最多的问题就是不同浏览器之间的兼容问题。 由于IE并不严格执行W3C标准， 而又几乎垄断了浏览器市场。 所以作为一名合格的网站制作人员， 必须要针对不同的浏览器进行微调。 实现不同浏览器之间兼容的方法有很多， 比如利用JS探测用户的浏览器类型，从而调用不同的样式表。 或者就是利用！important 属性来实现微调的效果。 下面是具体的例子。
下面是一段普通的 DIV 代码：
<div id="a"></div>
下面是有关层A在CSS样式表中的定义， 注意，这里使用了！important这个属性。
#a{margin-left:30px!important; margin-left:20px;}
在上面的例子中， 层a 在IE浏览器中， 左边距为20像素， 而在Firefox中， 左边距则变为30像素。 这是因为， !important在 CSS 中表示优先调用， 由于IE不能够识别这个属性， 所以在IE中， 只能够调用 “margin-left:20px;" 这个选项， 所以同样的一段代码， 在Firefox和IE中就会显示不同的样式。
不过值得注意的是， 最新版的IE 7.0 已经可以识别 !important， 这个属性了， 但是IE 6.0仍然不能识别。 所以这个小技巧还是相当有用的。 还有，一定要将xxxx !important 这句放置在另一句之上
六、 推荐网站：
http://www.aa25.cn/index.shtml 标准之路
七、 实例练习
