CSS的盒子模型

一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表 格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的 网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要 的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、 边界(margin), CSS盒子模式都具备这些属性。CSS 盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也具有这些属性，所以叫 它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料；边框就是 盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内 容常指文字、图片等元素，但是也可以是小盒子(DIV嵌套)，与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则 盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活 中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的， 边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆，最后从广场上空往下看由“盒子”堆出来的网页版面现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。转变我们的思路传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用<Photoshop 这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主 要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版 的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样 的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一 点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了 CSS排版网页，做到后来客户有什么不满意，特别是色 调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态 改变风格的功能。 < P>实现结构与表现分离在真正开始布局实践之前，再来认识一件事结构和表现相分离，这也用 CSS 布局的特色所在，结构与表现分离后，代码才简洁， 更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表 现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P text-indent: 2em;，这样结果body内容部分就如下，这没有外加任何表现控制的标签：<p>加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明 知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：<p><font color="#FF0000" face="宋体"段落内容< /font></p>这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。再直接列一段代码加深理解结构和表现相分离 用 CSS 排版以下是引用片段：<style type="text/css"><!-#photoList imgheight:80;width:100;margin:5px auto;-></style><div id="photoList"><img src="01.jpg" /><img src="02.jpg" /> <img src="03.jpg" /> <img src="04.jpg" /> <img src="05.jpg" /> </div>不用css排版以下是引用片段：<img src="01.jpg" width="100" height="80" align="middle" /><img src="02.jpg" width="100" height="80" align="middle" /><img src="03.jpg" width="100" height="80" align="middle" /><img src="04.jpg" width="100" height="80" align="middle" /><img src="05。jpg" width="100" height="80" align="middle" />第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个 比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查 下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就 行了，这有点像Flash软件里的元件和实例的概念，不同的实例共享同一个元件，这样动画文件就不大了，把这种想法移到CSS网页设计 中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址:http:/www.hsptc.com/css1.html用CSS排版减小网页文件体积， 像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调 用了（用class调用，而不是ID）,只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制 生成网页，把下面代码分别粘贴到网页中它们应在的位置）： 以下是引用片段：<style type="text/css"><!- * margin:0px; padding:0px; body font-size: 12px;margin: 0px auto;height: auto;width: 805px;.mainBox border: 1px dashed #0099CC; margin: 3px;padding: 0px;float: left;height: 300px;width: 192px;.mainBox h5 float: left;height: 20px;width: 179px;color: #FFFFFF;padding: 6px 3px 3px 10px; background-color: #0099CC; font-size: 16px;.mainBox p line-height: 1.5em;text-indent: 2em;margin: 35px 5px 5px 5px;-></style><div class="mainBox"><h5> 前言 < /h5><p>正文内容< /p></div><div class="mainBox"><h5>CSS盒子模式</h5><p>正文内容</p></div><div class="mainBox"><h5>转变思想< /h5><p>正文内容</p></div> <div class="mainBox"><h5>熟悉步骤< /h5> <p>正文内容</p> </div>熟悉工作流程在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、 color、height、width、align 等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯 的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版， 不是“<div>文字块一</divxdiv>文字块二</div><div>文字块2</div>”，而用“<p>文字块一</p><p>文字块二</p><p>文字块三</p>”更合适。 用DIV+CSS设计思路是这样的：1用div来定义语义结构；2然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3最后在这 个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看 结果图：峠亞笔US渝盒子稅堂雯¥対卄剖4它是金子辛芳说佗菽门在險逸计牛頁圻腹住呂：刃龙忙mien：'城托tpfUdnR、观 （hrr isi.过鼎的和咸.百阳Sfc孑運31S1E召曜甘.谊些鼬撕河M把逊朮申的血煮n ? I ±4®F F茗生 启中如见輔盅丁也具脊电些性，Mi昭HE盅代卫' 却&吨$毗盅于兰菲旳枣勺；向萄兀就毘也主于些芒干ESi貝扭”昨弗毋如 的泪沫或吾耳E抗斑咖料；世ItiX题亍本月亍；至于竝界5卿蜓亍摇芯旳时聞半側主耳对在一超査當一足三呼谍?BSJS间时也 力了方1恵出临*工网B展卜二，PlSKiiSST. U栉怛星出刊戍吕小倚c D咆涪j .与現妄览中盘子不同的£ , EJHMzitl1 切曹一嵌卜ie丸十立子.把刪e . 3唸曄师死比穴 匿融"三石亜磐勺主卡二把蚯3槎即霁更.fiSSfj百刘引瞼邑二勺”乘:一可u理硏为主洁中膚见土孑站停飙驱!生子是时 卄邙贮网科藏成旳宀屛at長肚王与工己衣刼尺皑宙丈毛宮-在加叫送中苦门吒T广堪上mt瓦刘呦8®启搭于口一走 旳郦和J?序蜀IS好很忌山厂商上卑下吾.話世医JE和吿啊（轨Id隹诚顾念奁谡计孙BMC?Si¥S£!SB7 .如 果忑下哼倉肌联康柱下足-覺吕壬屈*叭幷延用吕子的fi.BjfJPfi-B.前希I钿粘愕|工脳中牡|C 口塔書 冋購理|二运直%顶力t? 1006- 2006Guchui.AI Rijits Paserteid演示地址：http:/www.hsptc.com/css2.htmlCSS 排版结果图1.用div来定义语义结构页头 <div id="header"></div>导航栏5v id=Mnav,></div>内容udiv id="contenf5></div>te<div id=1lfooter"></div>现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），典型版面分栏结构其结构代码如下以下是引用片段：<div id="header"></div>