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 >

 

效果如下：