彻底弄懂CSS盒子模式（DIV布局快速入门）[2]

转变我们的思路

传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。

实现结构与表现分离

在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：

<p>加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。</p>

如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

<p><font color="#FF0000" face="宋体">段落内容</font></p>

这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离：

用CSS排版

<styletype="text/css">

<!--

#photoListimg{

height:80;

width:100;

margin:5pxauto;

}

-->

</style><divid="photoList">

<imgsrc="01.jpg"/>

<imgsrc="02.jpg"/>

<imgsrc="03.jpg"/>

<imgsrc="04.jpg"/>

<imgsrc="05.jpg"/>

</div>

不用CSS排版

<imgsrc="01.jpg"width="100"height="80"align="middle"/>

<imgsrc="02.jpg"width="100"height="80"align="middle"/>

<imgsrc="03.jpg"width="100"height="80"align="middle"/>

<imgsrc="04.jpg"width="100"height="80"align="middle"/>

<imgsrc="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)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

<styletype="text/css">

<!--

*{margin:0px;padding:0px;}

body{

font-size:12px;

margin:0pxauto;

height:auto;

width:805px;

}

.mainBox{

border:1pxdashed#0099CC;

margin:3px;

padding:0px;

float:left;

height:300px;

width:192px;

}

.mainBoxh5{

float:left;

height:20px;

width:179px;

color:#FFFFFF;

padding:6px3px3px10px;

background-color:#0099CC;

font-size:16px;

}

.mainBoxp{

line-height:1.5em;

text-indent:2em;

margin:35px5px5px5px;

}

-->

</style>

<divclass="mainBox">

<h5>前言</h5>

<p>正文内容</p>

</div>

<divclass="mainBox">

<h5>CSS盒子模式</h5>

<p>正文内容</p>

</div>

<divclass="mainBox">

<h5>转变思想</h5>

<p>正文内容</p>

</div>

<divclass="mainBox">

<h5>熟悉步骤</h5>

<p>正文内容</p>

</div>