CSS基础知识 － 盒模型/定位/浮动
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>
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>
效果如下：
技术改变世界
