CSS回顾
在学CSS3之前首先巩固下CSS的基础知识。
1.CSS框模型
举例子：
#box { width: 70px; margin: 10px; padding: 5px; }
这个代码将出现的效果是：
2.CSS定位与浮动
1）定位：
| 属性 | 描述 |
| position | 把元素放到一个静态的(static：元素框正常生成)，相对的(relative：元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置])，绝对的(absolute：元素框从文档流完全删除，并相对于其包含块定位)，或固定(fixed：元素框的表现类似于absolute,不过其包含块的视窗本身)的位置中 |
| top,right,bottom,left | 定义一个元素的上，右，下，左外边距边界与其包含块上，右，下，左边界之间的距离。注：如果position的属性值为”static”，则不会有任何效果。 |
| overflow | 设置当元素内容溢出其区域发生的事。overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理） |
| clip | 设置元素的形状，元素被剪入这个形状之中 rect (top, right, bottom, left) |
| vertical-align | 设置元素的垂直对齐方式。如：vertical-align:text-top;把元素的顶端与父元素字体的顶端对齐 |
| z-index | 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(1>0>-1) 注：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ |
看下对这些知识点的练习：
效果：
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 h2.pos_left 8 { 9 position:relative; 10 left:-20px; 11 top:-20px; 12 } 13 h2.pos_right 14 { 15 position:relative; 16 left:20px; 17 top:20px; 18 } 19 h2.pos_absleft 20 { 21 position:absolute; 22 left:280px; 23 top:30px; 24 color:red 25 } 26 h2.pos_absright 27 { 28 position:absolute; 29 left:-10px; 30 top:90px; 31 color:red 32 } 33 h2.one 34 { 35 position:fixed; 36 left:15px; 37 top:235px; 38 } 39 h2.two 40 { 41 position:fixed; 42 top:30px; 43 right:15px; 44 } 45 #over 46 { 47 background-color:#00FFFF; 48 width:150px; 49 height:150px; 50 overflow: auto 51 } 52 </style> 53 </head> 54 55 <body> 56 <p>1.绝对定位和相对定位的区别： 57 </p> 58 <h2>这是正常位置</h2> 59 <h2 class="pos_left">相对定位1</h2> 60 <h2 class="pos_right">相对定位2</h2> 61 <h2 class="pos_absleft">绝对定位的移动1</h2> 62 <h2 class="pos_absright">绝对定位的移动2</h2> 63 </body> 64 <hr /> 65 <p>2.固定定位： 66 </p> 67 <h2 class="one">固定定位测试1。</h2> 68 <h2 class="two">固定定位测试2。</h2> 69 <p> </p> 70 <hr /> 71 <p>3.overflow的使用：overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理） 72 </p> 73 <div id="over"> 74 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 75 </div> 76 </html>
View Code
2）浮动：
W3School上讲解的浮动较简单，不过也有些不太好理解。借鉴http://www.jb51.net/css/67471.html 这篇文章，对浮动有了点理解。
浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
我们先来看下高度塌陷的现象：
代码为：
<style type="text/css"> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } </style> </head> <body> <p>①因为浮动表现出高度为0（高度塌陷）的现象： </p> <div class="news" width="50px"> <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> </div> </body>
然后看下清理浮动的方法：
代码：
<style type="text/css"> .clear { clear: both; } </style> </head> <body> <p></p> <div class="news" width="50px"> <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> <div class="clear"></div> </div> </body>
代码：
<body> <p></p> <div class="news" width="50px"> <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> <br clear="all" /> </div>
</body>
③父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1(试了下，这里可以不需要的)；
