css布局——行列基础布局

一、基础行布局

代码：

直接把div堆砌上去就行，是比较简单的。

二、列布局

1.使用浮动实现

    
    
    


    
left
    

        
-->
    
    
right

改变div的浮动属性即可。

2.利用定位

这里有必要做一些说明：

网页的布局的正常顺序（应该就是文档流吧，求评论告知）是从左向右的，所以最左边的使用绝对定位，只需要控制好宽度。

接下来我给中部和右边分别设置margin-left来达到目的：

问题来了，那我可不可以从右往左设置呢？比如这样设置left。

结果是错误的，因为margin-left是以同级元素作为参照物的，而此时左边还没有任何元素，故而无法实现。那么该怎么呢？容我先买个关子，在本文末尾我会给出我的探索结果。

正确代码：

3.圣杯

圣杯布局和双飞翼布局极为相似，（我觉得没啥区别）。

在布局中有些细节还是比较难以理解的。（大家在看下面的分析时一定要看看完整的代码）

margin-left设置负值后元素会上浮（初始状态下left、right都在middle下方），100%则保证了元素处于div-container的最左端，此时只需设置left：-200px（意思是向左移动200px，而这个200px恰好就是container的左padding）。

下面再说说右边的。

margin-left：负值的效果和上述一致。现在问题来了，-220px是什么鬼？我将去掉margin-left的代码视图放在下面：

这是去掉right的视图：

所以，我们可以很容易的发现：margin-left代码的意思是right-div移到container的最右边，right的作用与left那边的效果是一样的。而且细心的读者不难发现，margin-left的数值恰好是container的宽度！（感兴趣的读者不妨利用控制台更改margin-left的数值，会更加容易理解上边的内容）

正确代码：

    
header


    

        
middle
        

           这是页面的主体内容
        
    
    

        
left
        

           这是页面的左边
           
        
    
    

        
right
        

           这是页面的右
        
    


    
footer

4.圣杯布局（讲真，这两个好像没有区别）。

我希望读者能够对css部分的设置有足够的重视。

sub就是左边的div样式，extra是右边的div样式。这里的main-inner是中间部分。

就像是鸟的身体和双翅。

    



    
header


    

        
main
        

            这是页面的主体内容
        
    


    
sub
    

        这是页面的左边
    



    
extra
    

        这是页面的右边
    


    
footer

补充：好了前面的关子买的有点久了，现在来说说我的探索成果吧！首先，读者必须明确点布局是从左往右的。（这句话很重要）

那么，首先我们需要在最右边建设一个div，作为其他两个元素的小镜子。

再来设置左边和中间的样式：

不知道大家有没有注意到middle的宽度从50%改为75%，这是因为middle的布局还是以左边为参考点的（也就是小镜子），而它在左边多出的那25%将会被我们的left光荣的覆盖。由此我们就玩成了。（实际上这只是本人钻了牛角尖，刚才发现设置右浮动更简单，呜呜~）