[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 >

      查看效果图

[CSS] CSS布局系列一_第1张图片 

      我们会发现浮动元素 <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] CSS布局系列一_第2张图片 

      代码如下:

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 >

 

 

 

 

 

你可能感兴趣的:(css)