1. Box Model (盒模型)
Box Model 是CSS的指定元素如何显示和交互，是CSS的基石之一。
页面上的每个元素被看成是一个矩形框，它由内容，填充(padding)，边框(border)，空白边(margin)组成。
他们之间的关系如下：
[ margin [ border [ padding [ content ] ] ] ]
margin, border, padding 都是可选的，他们的默认值为0。
2. position(定位)
a) 相对定位(relative)
相对于原位置进行移动。
eg:
#box1 {
position: relative;
left: 10px;
top: 10px;
}
原位置向下并向左各移动10px。
b) 绝对定位(absolute)
c) 浮动(float)
元素向左或向右浮动，直到碰到其他元素为止。
下面给出一个简单的新闻网页中常见的例子以供读者理解：
1 <html> 2 <head> 3 <title>Enclosing Floats</title> 4 5 <style type="text/css"> 6 7 .news { 8 background-color:#eaeaea; 9 border: solid 1px #999;10 width: 500px;11 }12 13 .news img {14 float: left;15 padding: 10px 0 10px 10px;16 width: 150px;17 height: 180px;18 }19 20 .news p {21 float: right;22 width: 300px;23 margin: 0;24 padding: 10px 10px 10px 0;25 }26 27 </style>28 29 </head>30 31 <body>32 33 <div class="news">34 <img src="news.jpg"/>35 <p>36 人民图片网6月19日报道 当日9时30分，黄河小浪底大坝2个排沙洞同时开启， 37 放水量达到每秒2600立方米，形成壮丽的巨瀑景观， 38 黄河第九次调水调沙正式开始。此后小浪底水库及其下游16公里处的西霞院水库下泄流量逐日增大， 39 6月23日控制黄河花园口流量约3800立方/秒下泄。 40 </p>41 </div>42 43 </body>44 </html>
效果如下：
