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 >
效果如下：
