彻底弄懂CSS盒子模式之三

来源:蓝色理想时间:07-04-03 点击: 点击这里收藏本文

8．再讲一则注意事项，在开始时我不是有说过要给浮动对象设定一个宽度的，不然会有意想不到结果，即没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。请大家自行修改下面代码我注释前边的宽（只能删其中一个），测试看看效果就知道怎么回事了。

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

二、下面我要请我的好伙伴clear出场给你们讲讲它的故事，有请。
大家好，我是clear，能见到如此多人捧场我感到无比的荣幸，虽然在各位网页设计工作中我的作用常常被忽略，但我也有些作用是没有人能替代的，下面我将讲几项我实用作用以激发大家对我的兴趣：
1．如果你想一段文本流两边可以出现浮动对像的话，你可以用clear:none，看下面效果，蓝色背景段落两边的盒子是浮动的哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>让对象两边都有浮动对象存在</title> <style type="text/css">  </style> </head> <body> <div class="box1"></div> <p>　　如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。 CSS盒子模式 </p> <div class="box2"></div> <p id="clearF">　　这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。 </p> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2．如果你要为一个网页准备一个页脚区块，比如<div id=”footer”></div>，你在设计网页的时候，你想不管你前边怎么浮动排版而又不想这个页脚跟上去，让它一直保持在前边内容后边，而且还是换行独立显示的，那么给这个页脚区块样式加个clear:both吧。
3．我还可以快速清除网页中具有浮动属性的不同对像的浮动，如果有很多的话，我的作用更能发挥出来，当然你也可以一条一条样式去删掉浮动的样式，但我肯定这样没有我来的方便，下面效果中，没有清除浮动前是横排的，但是清除后变成纵排（举此例只为说明问题，不管这实例实不实用），请自己删掉我的注释部分进行前后对比。

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

好了，我的介绍到此完毕，各位还满意吗？有什么不满意可以提出来哦。你的意见就像一面镜子，它可以让我很清楚地发现自己的不足，然后改进它。

9 7 3 1 2 3 4 8 :

把此文章收藏到：　　　　　

相关教程

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册