爱易网任务室提示您学习CSS，CSS能干什么呢？CSS能表现网页，以各种格式来显示页面，只需求你修正CSS代码就可以实现，HTML是网页的结构，可以配合CSS来实现制造我们的网页。

CSS 来规划很容易。如果你曾经习惯用表格规划的话，起先会感觉比较困难。其实不难，只不过动机不同，并且在实践中更有意义。

你可以把这一页面的各个部分当作独立的版块来看待，无论你选择哪一块。你可以绝对或绝对地用彼块取代此块。

定位

定位属性position用于定义一个元素能否absolute（绝对），relative（绝对），static（静态），或者fixed（固定）。

static值是元素的默认值，它会按照普通畅序生成，就如它们在的出现普通。的出现普通。

relative很像static，但可用top、right、bottom和left属性来偏移原始位置。

absolute使元素从HTML普通流中分离出来，并把它送到一个完全属于本人的定位世界。在这个稍微疯狂的世界，这个绝对的元素可以放置到任何地方，只需设置了top、right、bottom和left的值。

fixed的行为也很像absolute，但参考于浏览器窗口绝对于页面而放置绝对的元素，所以，理论上，当页面滚动的时候，固定元素完全保持在浏览器视区中。为什么说理论上的？不为别的，在Mozilla和Opera中任务得很好，但IE不会。

用绝对定位规划

你可以用绝对定位来创建一个传统两列规划，只需在HTML中使用如下面的类似规则：

<div id="navigation"> <ul> <li><a href="this.html">This</a></li> <li><a href="that.html">That</a></li> <li><a href="theOther.html">The Other</a></li> </ul> </div> <div id="content"> <h1>Ra ra banjo banjo</h1> <p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p> <p>(Ra ra banjo banjo)</p> </div> 

并且使用如下的CSS：

#navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; } 

你将看到，长度为10em的导航条被设置在左边。由于导航是绝对定位的，对页面的其他部分的流动不会有任何影响，所以所需求做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。

实在是太容易了！然而你并不受这个两列方法的限制。用精明的定位，你可以布置你所如你所需的更多的块。比如，你需求添加第三列，你可以为HTML添加“navigation2”块并且使用如下CSS：

#navigation { position: absolute; top: 0; left: 0; width: 10em; } #navigation2 { position: absolute; top: 0; right: 0; width: 10em; } #content { margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */ } 

绝对定位元素的独一副作用是，由于它们生活本人的世界里，没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域，没有什么问题，但是，特别是使用长度和宽度的绝对值时，你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做，与其绝对定位它们，不如浮动它们。

浮动

浮动将挪动一个元素到同一线上的左边或者左边，而四周也会有内容浮动。