[CSS] CSS布局系列一

      每次和同事朋友谈到前端，谈到CSS，总会听到他们说用哪个哪个框架，很方便很快捷地就完成前端设计，谁还会去一条一条的写CSS Rule。对于这种想法我总想说点什么。CSS框架试图通过在标记和表现之间建立强耦合来简化CSS布局，但是这种耦合正是我们摒弃基于表格布局的主要原因。这种进行CSS布局的"黑盒"方式可能会让人迅速地得到想要的结果，但是最终会阻碍开发人员理解这种语言和实现修改的能力[来源<精通CSS: 高级Web标准解决方案>]。

      闲话少说，开始聊聊CSS布局。所有CSS布局技术的根本都是3个基本概念：定位、浮动和外边距操纵。

      定位

      CSS中有3种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框架都在普通流中定位（普通流中元素框的位置由元素在HTML中位置决定）。下面稍微总结下相对定位、绝对定位和固定定位，要理解这三种定位方式，最主要的是抓住两个词"相对于"和"占空间"。

      相对定位是"相对于"元素在文档流中的初始位置，无论元素是否移动，元素仍然占据原来的"空间"

      绝对定位是"相对于"距离元素最近的那个已定位的祖先元素的位置，其与文档流无关，不占据"空间"

      固定定位是"相对于"视口（viewport），其实绝对定位的一种，也不占据"空间"

      浮动

      浮动float:right|left，浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。这儿我要说明的一点是，有很多人都一个意识，用了float接着就要用clear:left|right|both，那么为什么要用clear，下面用个例子说明

< html >
< head >
< style  type ="text/css" >
*  {
  padding :  0px ;
  margin :  0px ;
}
.float  {
  float :  left ;
}
.square  {
  height :  100px ;
  width :  100px ;
}
#float-1  {
  background-color :  #CC99B3 ;
}
#float-2  {
  background-color :  #4F779C ;
}
#float-3  {
  background-color :  #7195B7 ;
}
#no-float  {
  background-color :  #99CCCB ;
}
</ style >
</ head >
< body >
< div  id ="float-1"  class ="float square" >Float 1 </ div >
< div  id ="float-2"  class ="float square" >Float 2 </ div >
< div  id ="float-3"  class ="float square" >Float 3 </ div >
< div  id ="no-float"  class ="square" >No Float </ div >
</ body >
</ html >

      查看效果图

 

      我们会发现浮动元素 <div id="float-3" class="float square">Float 3</div> 后面有一个文档流<div id="no-float" class="square">No Float</div>，那么<div id="no-float" class="square">No Float</div>元素的框会表现得像浮动根本不存在一样。但是，框的文本No Float内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。要想阻止行框围绕在浮动框的外边，需要对包含这些行框的元素应用clear属性。

      外边距操纵

      这个很好理解，不过这里主要要说下外边距叠加的概念（我面试的时候还被问过）。 简单地说，当两个或者更多垂直外边距相遇时，他们将形成一个外边距。这个外边距的高度等于两个叠加的外边距的高度中的较大者。注意点，只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会产生叠加。

      下面通过一个例子展示定位，浮动和外边距操纵，首先展示下效果图（常见的布局）：

 

      代码如下：

CSS布局例子

 1  < html >
 2  < head >
 3  < style  type ="text/css" >
 4  *  {
 5    padding :  0px ;
 6    margin :  0px ;
 7  }
 8  .header  {
 9    position :  absolute ;
10    top :  0px ;
11    left :  0px ;
12    height :  40px ;
13    width :  100% ;
14    background-color :  #8F8F8F ;
15  }
16  .content  {
17    position :  absolute ;
18    top :  40px ;
19    left :  0px ;
20    right :  0px ;
21    bottom :  30px ;
22  }
23  .content .main-content  {
24    height :  100% ;
25    width :  100% ;
26    background-color :  #CCCCCC ;
27    overflow-y :  auto ;
28    margin :  0 auto ;
29  }
30  .dashlet  {
31    float :  left ;
32    height :  300px ;
33    width :  300px ;
34    margin :  10px ;
35    background-color :  #99B3CC ;
36  }
37  .content .to-top  {
38    position :  fixed ;
39    bottom :  40px ;
40    right :  10px ;
41    height :  50px ;
42    width :  50px ;
43    background-color :  #336699 ;
44  }
45  .footer  {
46    position :  absolute ;
47    bottom :  0px ;
48    left :  0px ;
49    height :  30px ;
50    width :  100% ;
51    background-color :  #8F8F8F ;
52  }
53  </ style >
54  </ head >
55  < body >
56  < div  class ="header" > <!-- HTML Header Code --> </ div >
57  < div  class ="content" >
58  < div  class ="main-content" >
59  < div  class ="dashlet" ></ div >
60  < div  class ="dashlet" ></ div >
61  < div  class ="dashlet" ></ div >
62  < div  class ="dashlet" ></ div >
63  < div  class ="dashlet" ></ div >
64  < div  class ="dashlet" ></ div >
65  </ div >
66  < div  class ="to-top" ></ div >
67  </ div >
68  < div  class ="footer" > <!-- HTML Footer Code --> </ div >
69  </ body >
70  </ html >