常见的CSS布局方式

一、单列布局：

方法一：上中下同宽

html:

<div id="container">
    <div id="header">头部</div>
    <div id="content">内容</div>
    <div id="footer">尾部</div>
</div>

css:

    body{margin: 0;}
    #container{
         height: 100%;
        /*   width: 960px; */
        /*设置width当浏览器窗口宽度小于960px时，单列布局不会自适应。*/
        max-width: 960px;
        margin: 0 auto;
    }   
    
    #header{
        height: 20%;
        background-color: red;
    }
    #footer{
        height: 20%;
        background-color: yellow;
    }
    #content{
        height: 60%;
        background-color: green;
    }

效果：

方法二：上下为浏览器宽度，中间没有

html:

<div id="container">
    <div id="header">
        <div class="layout">头部</div>
    </div>
    <div id="content" class="layout">内容</div>
    <div id="footer">
        <div class="layout">尾部</div>
    </div>  
</div>

css:

#container{
    height: 100%;
}
#header{
    background-color: yellow;
    height: 20%;
}
#content{
    background-color: green;
    height: 60%;
}
#footer{
    background-color: red;
    height: 20%;
}
.layout{
    /*width: 960px;*/
    max-width: 960px;
    margin: 0 auto;
}   

效果：（当然，当浏览器宽度小于960px时，与上一个方法显示效果相同）

二、三列布局

1.两边定宽中间自适应

方法一：float+margin

html:

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <div id="content"></div>
</div>

css:

div{height: 100%;}
    #left{
        width: 100px;
        float: left;
        background-color: red;
    }
    #right{
        width: 100px;
        float: right;
        background-color: yellow;
    }
    #content{
        margin: 0 100px;/* 或者换成overflow: hidden; 触发了BFC使重新计算宽度，就不需要写margin了*/
        background-color: green;
    }

效果：（缺点：先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列，渲染时先渲染了侧边栏，而不是比较重要的主面板.。）

DOM顺序固定！

方法二：（绝对定位法）

html:

<div id="container">
    <div id="left"></div>
    <div id="content"></div>
    <div id="right"></div>
</div>

css:

div{height: 100%;}
#left,#right{
        position: absolute;
        top: 0;
        width: 100px;
    }
    #left{
        left: 0;
        background-color: red;
    }
    #right{
        right: 0;
        background-color: yellow;
    }
    #content{
        margin: 0 100px;/* overflow: hidden; */
        background-color: green;
    }

DOM顺序可以随意调整！

缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

方法三：margin负值法（圣杯布局）

html:

 <div id="container">         
    <div class="main"></div>        
    <div class="left"></div>        
    <div class="right"></div>  
</div>

css:

.main {        
    float: left;       
    width: 100%;   
 }  
 .left {       
    float: left;        
    width: 190px;        
    margin-left: -100%;               
    position: relative;  
    left: -190px;  
}   
.right {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
    position: relative; 
    right: -230px;  
 }
#container {        
    padding: 0 230px 0 190px;   
 }

DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的main内容部分比两边的子面板宽度小的时候，布局就会乱掉。

方法四：margin负值法（双飞翼法）

html:

<div class="main-wrap">
      <div class="main">#main</div>
</div>
<div class="sub"></div>        
<div class="extra"></div>

css:

.main-wrap {        
    float: left;       
    width: 100%;   
 }  
 .sub {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
}   
.extra {        
    float: left;        
    width: 230px;        
    margin-left: -230px; 
 }
.main {    
    margin: 0 230px 0 190px;
}

主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局main的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。