CSS3弹性盒模型与流式布局

这是一个常见的页面布局，Header→Body→Footer，中间Body包含两到三列，重要内容放置在html靠前位置，优先加载，html代码如下：

    Header
    

        
Main

        
        
    

    

如果使用传统的CSS来实现，比较麻烦，得使用float，margin负值，但是采用CSS3一个新增属性——display:box后，一切问题，迎刃而解。我们先看相关文档（ 飘零雾雨 CSS3手册 ）：

实现的CSS代码，左右定宽，中间自适应的流式布局，html、css代码量极少。

header{ height:100px; margin-top: 10px; border: 1px solid #000;}
article{ height:300px; margin-top: 10px;}
footer{ height:50px; margin-top: 10px; border: 1px solid #000;}
article{ display:-webkit-box; display:-moz-box; display:box; width: 100%;}
.aside{ width: 150px; border: 1px solid #f00; -webkit-box-ordinal-group:0; -moz-box-ordinal-group:0; box-ordinal-group:0;}
.main{ -webkit-box-flex:1; -moz-box-flex:1; box-flex:1; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; margin: 0px 10px; border: 1px solid #f00;}
.sub{ width: 200px; border: 1px solid #f00; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2;}

box-flex:,number为任意数字，默认为0。意思为子元素按照父元素剩余空间分配比例，number即为比例数。两个aside的宽度分别为150px、200px，article剩余空间分配给main，如果article宽设为100%，即为流式布局。

　　box-ordinal-group:,元素按number值显示，数值较低的元素显示在数值较高的元素前面。本来页面加载顺序是【main】→【aside】→【sub】，我们把这3个的box-ordinal-group值分别设为1-0-2，这样就让aside在main左边显示了。

　　最后，我们看下传统做法是怎样的。

　　html代码：

    
Header

    

        

            
Main

        

        
Side

        
Sub

    

    
Footer

css代码：

.old_method{ margin-top: 20px;}
.hd{ height:50px; margin-top: 10px; border: 1px solid #000;}
.bd{ height:300px; margin-top: 10px; }
.ft{ height:50px; margin-top: 10px; border: 1px solid #000;}
.bd{ width: 100%; overflow: hidden;}
.bd_side{ float: left; width: 150px; margin-left: -100%; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #f00; }
.bd_main{ float: left; width: 100%; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #ccc; }
.bd_main .main_content{ margin: 0px 200px 0 150px;}
.bd_sub{ float: left; width: 200px; margin-left: -200px; margin-bottom: -3000px; padding-bottom: 3000px; background-color: #f60;}

通过margin负值把side拉到左边，sub拉上右边； margin-bottom :  -3000px ;  padding-bottom :  3000px ；使两边同高，效果图如下：

完整代码如下：

    
        
        
        
        
        
    
    
        

            Header css3 方法
            

                
Main

                
                
Sub

            

            
        

        

            
Header 不用css3的方法

            

                
Main

                
Side

                
Sub

            

            
Footer

        

    

转载地址： http://www.cnblogs.com/leecanz/archive/2012/03/05/2379723.html