1.                              

3.                       

5.       

7.       

9.   

11.    

13.                  

15.        

17.   

19.        

21.        

CSS标签重置

对于XHTML+CSS布局起着一个重要的决定性作用，它是提高页面浏览器兼容性的{dy}步。

那么什么是标签重置呢？

顾名思义，就是对HTML中的所有标签属性重置，因为每个浏览器都有一个自己默认的CSS文件，对HTML中的所有的标签进行定义，以便没有定义CSS的页面能够正常显示在页面，页面在加载的时候如果没有找到自带的CSS文件，浏览器就用事先为您准备好的CSS样式，但是这个对于页面布局，没有什么用，所以我们需要将它们重新设置，不过标签有那么多，属性那么多，怎么设置？！这都是个问题！

哈哈，不要着急，问题很容易解决，其实在我们布局页面的时候，将最容易影响页面布局的是HTML标签中的内外边距，只要我们将最常用的标签的内外边距设为零就OK了~比如一个页面中用到下面div,p,ul,li四个标签那么我们的重置代码就要这么写

因为body标签不同的浏览器定义的内边距是不一样的，所以在上面代码中加入body。
如果后面我用到form,h1,h2标签的话，我就再添加上去就OK了

用到几个标签就写几个！

有些人很喜欢用*{margin:0; padding:0;},其实KwooJan不建议这么用，因为HTML标签太多了，HTML4.01 参考手册中就多达89个，我们平时常用的也就那么几个，所以没有必要将所有标签重置，这样反而使页面加载速度变慢！特别是对于大站点，更不提倡！

不过呢，如果页面出了问题，用这个可以检验一下，是不是有标签没有重置而导致的布局错位哟~！

几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好。

ol 有序列表
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

表现为：
1……
2……
3……

ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>


很多人容易忽略 dl dt dd的用法

dl 内容块
dt 内容块的标题
dd 内容


可以这么写：

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

dt 和dd中可以再加入 ol ul li和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

课程开始：
      前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY  ！！！
      OK！我们要做的导航条的效果如下：

      鼠标移动上去背景变黑，并且字体颜色变成白色

      0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=img_0.4517426582515183 style="CURSOR: pointer" height=48 alt="" src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144210.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵

【{dy}步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下：

还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码哟~

这里就不多说了，不明白的就看，课程顶部的课程关键词
怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢~呵呵
(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个XHTML+CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器，并且代码{jd1}的精简！CSS文件加载速度大大提升哟~)

【第二步】
盒子做好了，我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”，如果我们把这内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义UL的时候大小一定也要和外面的盒子一样大哟~,所以呢，我们的代码就知道怎么写了吧

效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：
0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_152 alt=1.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144211.gif" width=396 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291112201739deb46bd8fb.gif" status="2" initialized="true" outfunc="null" unselectable="true"> 

效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~
想出来了没有？什么没有？
没关系，我带着大家想想，因为<li>标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个<li>,所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^
对喽~用浮动Float！可是让谁浮动呢，当然是<li>标签喽~代码如下：

效果是不是和下面的一样呢
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_153 alt=2.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144212.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291127977ee165a39830b2.gif" status="2" initialized="true" outfunc="null" unselectable="true">

大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的
1）盒子(#nav)高度不一样
2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！
解决上面这两个问题，也很容易，如下
1）做到这里标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}”
2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:none;”就OK了
现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_154 alt=3.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144213.gif" width=439 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291127f8cd05e4a71efd44.gif" status="2" initialized="true" outfunc="null" unselectable="true"> 

如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，{jd1}可以学会

【第三步】
第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。
好~！我们现在就将他们分开！设置<li>标签的宽度为100像素：

为了便于观察我们暂且将<li>标签的背景设置成红色(设置背景色，是页面布局中一个很重要的方法，便于查看块状元素区域范围)

效果如下：
 
0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_156 onclick="zoom(this, this.src)" alt=4.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144214.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/09052911531d2542b36060254f.gif" status="2" initialized="true" outfunc="null" unselectable="true">

 瞧瞧，发现问题了吧，我们的<li>标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理，不然的话，你是发下不了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降低哟~
现在暂不把<li>标签的背景色去掉，当我们把它调成我们需要的效果的时候再去掉！
继续，我们把li的高度设置成盒子的高度35像素，代码自己写，怎么样，高度一样了吧，但是文字却位于顶端，如何将它设置成居中呢，对喽~设置行距(如果你不会，建议你看看这篇文章《两种方法实现垂直居中》)，在<li>的CSS代码中再加入下面这句代码：

效果是不是和下图一样呢
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_157 onclick="zoom(this, this.src)" alt=5.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144215.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291222f679a38c1abaa92b.gif" status="2" initialized="true" outfunc="null" unselectable="true">

好垂直居中解决了，轮到水平居中了，这个就容易了吧，直接在<li>的CSS代码中再加入下面这句代码：

怎么样，效果有点意思了吧~到这里我再发一次代码，保证大家每个步骤都学会！

好~！做到这里，大家有没有想过一个问题，因为我们的<li>标签是设置了宽度为100像素，已经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那这时候我们就需要去掉其宽度，这时候<li>的宽度就会缩小至文字的宽度，也就是说，如果我们再添加一些文字(把我们的酒杯换成一个大个的)，这个<li>也会跟着变大，大家去掉宽度后试试，是不是这个样子，这样我们的导航条就比较灵活了，不会对“酒杯”的大小有所顾忌了！

虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服，那么我们就帮它扩大一下空间，但是又要保证宽度自适应，解决方法很容易，加上左右内边距就ok了，这里设置边距为10px，在<li>标签加上下面代码，顺便把背景颜色去掉

效果是不是这样
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_160 alt=6.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144216.gif" width=571 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291254f9ffdb9423cb79dc.gif" status="2" initialized="true" outfunc="null" unselectable="true">

无论你的“杯子”是增大还是缩小，<li>不但宽度会随之增大缩小，但是杯子和杯子之间的距离永远不变！怎么样有点意思吧~！
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_162 alt=7.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144217.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/090529130110cdb4913fe0c0b1.gif" status="2" initialized="true" outfunc="null" unselectable="true">

我们将导航条做成了下面的效果
0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=img_0.505499458595577 height=61 alt="" src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144217.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">
但是此时的导航条还没有链接，还不能点击，这节课我们就要做一个完整的导航条

【第四步】

修改方法如下
1）导航加链接，HTML代码如下：

2) 文字大小12像素，CSS代码如下

3）鼠标移动上面和拿开效果

效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_164 alt=8.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144219.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291344162f22e189969a20.gif" status="2" initialized="true" outfunc="null" unselectable="true">

到这里，基本上一个导航条就出来了~不过为了能让大家再提高一个层次，KwooJan就帮大家对上面的导航条进行一下修改，算是抛砖引玉！
我希望鼠标移上去后，链接的背景变成黑色的，下面是我的步骤
首先把链接a加上一个背景，以方便看出来链接a的区域

怎么样，知道a的区域了吧
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_165 alt=9.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/21442110.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/090529144045816522086ddc66.gif" status="2" initialized="true" outfunc="null" unselectable="true">

 现在我要将a的高度设定为35px和盒子一样高度，这样我在把刚才的亮蓝色背景就可以xx覆盖下面盒子的灰色了
于是我插入下面红色的代码：

可是不管我怎么刷新浏览器，高度都没有任何变化，这是为什么呢？！
原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和height只是针对块状元素，说道这里，解决办法就出来了，只要我们把内联元素a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元素。大家先不要加这段代码，闭上眼想想界面会变成什么样子？

实际效果：
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_166 onclick="zoom(this, this.src)" height=195 alt=10.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/21442111.gif" width=700 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/09052915168cb9661edc1ab3f5.gif" status="2" initialized="true" outfunc="null" unselectable="true">

IE6和FF显示效果居然大相径庭，IE6中为什么所有链接纵向排列了呢？其实这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性---霸道，它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导致IE6中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为FireFox认为a即使为块状元素，也应该受到外面<li>元素的影响，所以如此现实，究竟以谁标准，因为大家都认为FF是标准浏览器，所以大家可以以FF为标准，不过KwooJan认为，不用管谁标准不标准，那都是相对的，我认为IE标准，FF就不标准了呢，我不愿意在这个问题上浪费精力，我更喜欢将精力用在思考如何提高页面的浏览器兼容性！

看到这里我想大家应该知道如何让页面在IE6中显示的和FF中一样，很简单，只需要在a的CSS代码中加入“float:left;”

问题迎刃而解，这还是用到前三节的课程内容，如果你想不起来如何解决，说明前面的课，特别是第二节的课，你没有真正理解！怎么做，你应该知道....回去再品品去

但是这样你不觉着，每个连接的左边和右边是不是太挤了，紧贴着a区域的左侧和右侧，应该怎么做？还是很简单，只需要再加上一句话“ padding:0 10px;”

现在再瞅瞅，是不是下面的效果
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_167 onclick="zoom(this, this.src)" alt=11.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/21442112.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291516e457f93ad8d43f2f.gif" status="2" initialized="true" outfunc="null" unselectable="true">

这样看看是不是不挤了吧，哈哈，看着舒服了吧，但是这离我们的想要的效果只有一步了，因为现在看到的连接效果是，鼠标移上去和拿开背景都是蓝色的，我们现在只需要将，a链接中的背景去掉，移到a:hover的CSS代码中，并且颜色变成“#000”就ok了~

怎么样，和下面的效果一样么？
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_168 onclick="zoom(this, this.src)" alt=12.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2144210.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905291516e72d6c54909bfac9.gif" status="2" initialized="true" outfunc="null" unselectable="true">

效果好多了吧，这下是我们想要的效果了吧~
当然！大家还可以把背景不设置成黑色，用个图片也可以！现在大家明白，为什么一开始我说这款导航栏可以演变出成千上万的不同特色的导航栏了吧~万变不离其宗！

第四课的思路就是这样的，如果吃透了这节课，那么以后什么样子的导航都很轻易作出来，如果你在和js很好的结合起来用~你就可以很自信的向老板提出加薪了！！！^_^

下节节课我将给大家用浮动方法布局一个页面，敬请期待！

还记得第二课我们做的例子的效果么？{zh1}效果是，红色方块和蓝色方块都处于一行，我们使用“Float:left”，打击了块状元素的“霸道”即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了“Float:left;”后，红色方块终于允许蓝色方块和它处于同一行。如图：

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" height=244 alt="" src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2148200.gif" width=568 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}">

我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；

在上个例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块CSS代码中分别加了“Float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100的绿色方块，并让其处于第二行，效果如下图：
 

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_141 alt=1.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2148201.gif" width=405 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905251318cf8bc1f544d16ffd.gif" status="2" initialized="true" outfunc="null" unselectable="true"> 

可是这时候不管怎么放，在IE中的效果始终是

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_142 onclick="zoom(this, this.src)" height=182 alt=2.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2148202.gif" width=700 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905251318e5b9ebb7101fa627.gif" status="2" initialized="true" outfunc="null" unselectable="true">

导致绿色拍到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"Float:left;"，但是为了浏览器兼容性，又不能去掉(什么？这句话看不明白，只能说明第二节课你没有好好学，好好品味！)，怎么办？
好办~！只要在CSS代码中加入下面这段代码：

并在HTML代码中加入下面代码：

上面这句话究竟加在那个位置呢，要加在蓝色方块和绿色方块中间，然后看看效果是不是我们想要的了~^_^

目的就是为了xx蓝色方块的浮动对下面绿色方块的影响！是影响哟~是xx影响，而不是清楚蓝色方块的浮动，或者说xx蓝色方块的浮动对下面区域块产生的作用！（仔细品品我说的这句话！）
如果还是不明白，你就在红色方块和蓝色方块中间加上“<div class="clear"></div>”，看看效果变成什么样子，然后再品品我刚才说的话！

这节课就到这里，下节课我们做一个导航条，很实用的哟！一定要把前三节吃透，不然第四节会跟不上理解不透！

页面布局有两种方式
1）浮动Float
2）定位Position

今天就来一个小小的练习，让大家理解Float的含义

页面效果如下：

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_130 alt=1.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2157590.gif" width=456 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905242310267b5ed06e990300.gif" status="2" initialized="true" outfunc="null" unselectable="true"> 

源代码： 例子2.rar

大家应该注意到了，虽然红色方块的宽度并不是{bfb}，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是{bfb}，它也不允许其他元素和他同在一行）为了xx这种“霸权”，让红色和蓝色方块都处在一行，如图

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_132 alt=2.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2157591.gif" width=568 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905242310ec73f3e8e0e21016.gif" status="2" initialized="true" outfunc="null" unselectable="true">

 此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_133 alt=3.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2157592.gif" width=318 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905242310049b3512cf465920.gif" status="2" initialized="true" outfunc="null" unselectable="true"> 

这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。
怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~

到这里，大家应该明白Float的作用了吧，就是为了xx块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要xx块状元素霸权主义才能布局好哟，比如KwooJan的博客中间内容部分，分为左边(LEFT)和右边(RIGHT)，就是要用上面这个方法布局的哟，如下图

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_134 onclick="zoom(this, this.src)" height=558 alt=BLOG.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2157593.gif" width=700 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/09052423190bcc94b149a3b897.gif" status="2" initialized="true" outfunc="null" unselectable="true">

细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：
 

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" class=zoom id=aimg_135 onclick="zoom(this, this.src)" alt=double.gif src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2157594.gif" width=600 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/0905242333f20a17378ff32dc4.gif" status="2" initialized="true" outfunc="null" unselectable="true">

其实这是IE6的一个BUG，(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

1）要为块状元素；
2）要左侧浮动；
3）要有左外边距(margin-left)；

解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：

现在再看看，是不是IE6和FF显示一样了呢~

呵呵，这节课也比较容易吧，如果大家有不明白的可以留言，我会做进一步解释。
下节课，我们讲讲“浮动xx(Clear)”问题！

最终代码：  最终代码.rar (587 Bytes)
精简后的代码CSS加载更快，大家一看就明白了^_^

盒模型，是+CSS布局页面中的核心！是关系到设计中排版定位的关键，都遵循盒模型规范，例如<div>、<p>、<a>……盒模型包含
(外边距)margin，(内边距)padding ，(内容)content，(边框)border。

下图是CSS盒模型的示意图 

0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_127 alt=盒子模型.jpg src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2204160.jpg" width=586 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0905/09052418015c76c0984a4bae1a.jpg" status="2" initialized="true" outfunc="null" unselectable="true">

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，{zh1}从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。
 0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" id=aimg_201 alt=untitled.bmp src="http://webdesign.jzxue.com/System/uploads/allimg/100103/2204161.jpg" width=510 onload="var image=new Image();image.src=this.src;if(image.width>0 && image.height>0){if(image.width>=700){this.width=700;this.height=image.height*700/image.width;}}" file="attachments/month_0906/0906021729053a8761fd718619.bmp" status="2" initialized="true" outfunc="null" unselectable="true"> 
                 由“盒子”堆出来的网页版面
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，{zh1}再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。