03-圣杯布局

一、 html结构:

二、CSS样式

(1)定义容器样式

*{
     padding: 0; 
     margin: 0; 
}

.container{
    min-width:400px; 
    height:200px; 
    background-color: blue;
} 

在浏览器中的效果:

image.png

(2)给三个盒子添加宽高和背景色:

.left,.right{
 width:200px; 
 height:200px;
 background-color: green;
 float: left;
}
.main{
   width:100%;
   height:200px;
   background-color: red;
   float: left; 
}

在浏览器中的效果:

image.png

我们想要.left和.right可以在红色这一行的左右两边，而此时是被.main给“挤”下去了。利用给 父容器container添加padding，为.left和.right留出位置
(3)为父容器container添加padding

.container{
      min-width:400px;
      height:200px;
      background-color: blue;
      padding:0 200px;
}

在浏览器中的效果:

image.png

出现这种现象的原因是:
由于父容器container设置了padding，因此子元素的实际内容宽度为除去padding之后的内 容，因此.left和.right会出现右移和上方.main的红色区域左侧对齐的情况，而左右两块设置的 padding也是我们为绿色的.left和.right预留的位置，现在我们要做的就是让.left和.right两个 绿块移动到相应位置。

image.png

(4).left的移动(重点)
首先是.left，我们要使用外边距margin为负朝相反方向移动的特性来完成相应的功能，但由 于两个蓝块是padding的位置，因此.left设置的外边距移动时并不包含父元素container的 padding，由于.main的红色区块已经占满了剩余位置，因此.left的绿块会移动到上一行。 即.left{margin-left:-100%}实际向左移动的路线为下图黄色箭头:

image.png

为.left单独添加样式:

.left{
   margin-left:-100%; 
}

在浏览器中的效果:

image.png

发现.left已经发生了移动，而.right由于左侧的.left腾出了位置，因此移动到了原来.left的位 置。现在我们需要将上面.left的绿块移动到左边蓝色的位置，这里也许有朋友要问为什么不继 续用margin-left:-200px直接移动过去，或者一开始为什么不用margin-left?这里的原因就是 我们刚刚讲过的，由于蓝色区块是父容器contianer设置的padding位置，因此子元素设置 margin只能够在剩下的content区域内。这里我们可以参照一下Chorme浏览器的盒模型:

image.png

padding是在实际内容content之外的，内部子元素设置margin只能在这个content区域内。 因此上面我们设置.left{margin-left:-100%}没有到达左侧的蓝色padding区块就是这样的原 因。
当然我们可以看一下此时继续设置.left{margin-left:-200px}的效果: 此时.left的样式为:

.left{
 margin-left:-100%; 
margin-left:-200px;
 } 

在浏览器中的效果:

image.png

发现.left的绿块并没有移动蓝色位置，而是在content红色区块的范围内进行了移动，这证实 了我们的结论。不能使用margin，我们考虑另一种解决方案，使用定位:将.left设置为相对 定位，以其自身位置为参照，向左移动200排序，这样就可以到达蓝色区块的位置了。有朋友 要疑惑为什么定位可以不受content大小的限制呢?这是因为position是基于全局的，整个浏 览器的窗口任意位置都是可以进行定位的。
因此我们为.left加入定位样式:

.left{
     margin-left:-100%;
    margin-left:-200px;
     position: relative;
     left:-200px;
     top:0px;
}

在浏览器中的效果:

image.png

可以看到效果跟我们所预期的是一样的。
(5).right的移动
明白.left的移动后，.right的移动就很容易了。我们同样使用margin，移动和.right宽度一致 的宽度可以使它移动到如下位置(下图中黄色框):

image.png

不会直接移动到蓝色框和上面的.left是同样的原因。 接下来我们为.right添加margin-left:-200px的样式:

.right{
margin-left: -200px; position: relative; //新加样式
}

在浏览器中的效果:

image.png

结果跟我们想的一样，接下来我们只需要通过定位将.right的绿色区块移动到右侧蓝色区块即 可:

image.png

为.right添加position样式:

.right{
    margin-left: -200px;
    position: relative;
    right:-200px;
    top:0px;
}

在浏览器中的效果:

image.png

这样我们就最终实现了我们想要的结果。

所有实现代码

    
    
    
    
    




    

        
main
        
left
        
right
    

喜欢的关注下公众号哦,每天都有新的博文推送哦

wechat.jpg