CSS学习笔记

三列布局（中间自适应）：

HTML：

<div class="left">left</div>
<div class="main">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。</div>
<div class="right">right</div>

CSS：

.left{ width:200px; height:600px; background:#ccc; position: absolute; left:0; top:0}
.main{ height:600px; margin: 0 300px 0 200px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

水平居中：

.center{margin: 0 auto;}

盒子模型：

清除浮动的常用方法：

1. clear 属性 ---- 常用clear:both;

   clear:left; 或者 clear: right;

2. 同时设置width:100%;(或固定宽度) + overflow:hidden;

position:

相对定位()relative：

1. 相对于自身原有位置进行偏移

2. 仍处于标准文档流中

3. 随即拥有偏移属性和z-index属性

绝对定位(absolute)：

1. 建立了以包含块为基准的定位

2. 完全脱离了标准文档流

3. 随即拥有偏移属性和z-index属性
   

CSS学习笔记

原文：http://my.oschina.net/thc/blog/520038