经典圣杯布局和关于如何居中元素

1.所谓圣杯布局，就是有三个块级元素div,竖向展开的。

圣杯布局它的目标是左右两栏定宽，中间那一行流式。

<div id="header"></div>

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>

</div>

<div id="footer"></div>

 文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。

在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。
 

横向两列布局的两种实现方式：   1.两div均设置左浮动，使用margin设置两者间间距

                                              2.一div设置左浮动，另一div设置右浮动

2.步骤：

（1）要设置标准的3列的布局模式，左边列（left column） 的宽度是200px，右边宽度的是150px ，中间的宽度是100%

#container{  
        padding-left: 200px; /*left column width*/    
        padding-right: 150px; /*right column width*/  
        overflow: hidden;
    }

 

这样就能让container左边和右边空出200px，150px

（2）

 本栗子中设置了left:180px;right:130px;

 （3）margin-left的作用。

margin-left:-100%;作用是让#left的移动到#center左边，因为刚开始的时候，都设置了左浮动和使用相对定位。

#container .column{  
        position: relative; /*使用的是相对定位 */
        float: left;  /* 后面的三个div，它们被包裹在一个定宽的大div中，且它们都是左浮动（float:left），且它们都是定宽， */
    }

margin-left：-它的宽度；则会移动到#center的右边

（4）对于#right，通过margin-right: -240px;移动到右边

效果图：

代码：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
       body{  
        min-width: 988px; /* 最后一步，可用性的修改。由于中间center层是流式的，当窗口大小缩小到X+Y的时候，center就没有了，所以应该给#container设置一个最小宽度   */
    }  
      #head{  
        text-align: center;   
    }
     #container{  
        padding-left: 200px; /*left column width*/    
        padding-right: 150px; /*right column width*/  
        overflow: hidden;
        /* border:1px solid #333;   */
          
    }  
     #container .column{  
        position: relative;  
        float: left;  /* 后面的三个div，它们被包裹在一个定宽的大div中，且它们都是左浮动（float:left），且它们都是定宽， */
    }  
      #center{  
        background:#eee;  
        padding: 10px 20px;  /* center这个单词的位置   */
        margin: 0 15px;  /* 让center左右外边距为15px */
        width: 100%;  /* width:100%来使控件宽度为父控件的内容宽度 */
        min-height: 300px;  
        overflow:visible;  
          
        }  
       #left{  
        width:180px;  
        background:green;  
        margin-left:-100%; /* 浮动到上边   */
        right: 270px;  /*180+60(padding total)+ 30(margin)到左边*/  
        padding:0 10px; /* LC fullwidth + CC padding */  
        min-height: 300px;  
        }   
        #right{  
        width: 130px;  
        background:yellow;  
        padding: 0 10px;  
        margin-right: -240px; /*fullwidth  + center column padding 尽量大一点，chrome浏览器下，这个div浮动不上来*/  
          
        min-height: 300px;  
        }  
      #footer{  
        clear:  both;     
        text-align: center;  
      }  
      
    /*IE6 fix 修改IE6以下的bug了，margin负值在IE6上会失效把left层弄到很远的地方，需要把它拉回来*/  
      
    * html #left {  
        left:100px;       
    }  
    </style>

</head>
<body>
    <div id="head">
        <h1>head</h1>
    </div>
      
    <div id="container">
        <div id="center" class="column">
        center
        </div>
          
        <div id="left" class="column">
              left
        </div>
          
          <div id="right" class="column">
              right
          </div>  
    </div>
      
    <div id="footer">
      <h1>footer</h1>
    </div>
</body>
</html>

 3.关于如何居中元素

（1）如何居中div

//给div一个宽度，然后添加margin：0 auto这样的属性
.div{
  width:200px;
  margin:0 auto;  
}

（2）如何居中一个浮动元素

.div{
  width:500px;
  height:300px;/*高度可以不设*/
  margin:-150px 0 0 -250px; /*上为height:300px的一半，右为width:500px的一半*/
  position:relative;
  background-color:pink;/*为了便于观察效果*/   
  left：50%;
  top:50%; 
}

 

posted @ 2016-07-25 10:39  GumpYan  阅读(361)  评论(0)    收藏  举报