在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有款式化的东西，而且Web在浏览器中除内容外都应该由CSS表现，这包括规划与其它款式。一旦一个标准的XHTML代码写完之后，那么CSS可以实现其实百变面孔。其实XHTML是一个演员，CSS是编剧，XHTML演什么角色，都由CSS来决定的。

    这听起来似乎有点理想主义，实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。

    我们在设计页面的时候遵照的一个准绳就是：重要内容首先加载，将要内容稍后加载。因此我们会发现像我的博客一样，主内容代码是写在侧边栏前面的。但是我们却可以通过CSS使侧边栏位于左侧，如果不看代码只看在页面中的表现，这和先加载侧边栏没有什么不同。这就是结构和表现分离的好处。

    假设我们有一个三栏的规划，其中两个是主内容区域，一个是侧边栏的次内容区域。那么按照上面的准绳，我们应该把两个主内容区域的代码写在侧边栏次内容区域的前面，这样浏览器才会首先加载他们。那么我们就要构建下面的代码段：

<div id="content"> 
  <div id="primaryContent"></div> 
   <div id="secondaryContent"></div> 
 <div id="sideContent"></div> 
</div> 

前面曾经说过，结构和表现分离的好处就是我们可以任意地安排这三栏的位置。比如我们要把“sideContent”放在页面的左侧，主内容区位于两头和左侧，同时栏与栏之间有10px的间距。我们设定页面宽度为760px，扣除两个10px的间隔，那么内容区的共有740px的宽度，我们可以设定请内容区为290px，侧边栏为160px。于是有

#primaryContent {  
 float:left;  
   width:290px;  
  height:300px;  
}  
#secondaryContent {  
 float:left;  
   width:290px;  
  height:300px;  
}  
#sideContent {  
  float:left;  
   width:160px;  
  height:300px;  
} 

注：为了演示方便没有优化代码。

float:left为使三个div元素水平对齐的常用方法。这样我们预览页面的时候，三个div便会出如今同一行内。

    接下来，我们要挪动它们的位置。把primaryContent挪动到160+10px的位置（10px）为间距，那么可以设置为

margin-left:170px;

把sendcondary依此向右挪动，和primaryContent的距离也是10px，需求

margin-left:10px;

那么这个时sideContent曾经被挤出content了，并且其左边缘正好是content的左边缘，因此我们要使用负的边距把它拉回到正常位置：

margin-left:-760px;

这样位置就正好了。

（本人查看运转效果）