详解圣杯布局

最新推荐文章于 2023-09-02 14:57:27 发布

fltenwall

最新推荐文章于 2023-09-02 14:57:27 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：圣杯布局 JavaScript布局网页经典布局三栏布局响应式布局

本文链接：https://blog.csdn.net/qq_32925031/article/details/89702329

版权

前端专栏收录该内容

56 篇文章 7 订阅

订阅专栏

圣杯布局

html结构：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

CSS样式

（1）定义容器样式

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

此时在浏览器中的效果为：

在这里插入图片描述

（2）给三个盒子添加宽高和背景色：

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

此时在浏览器中的效果为：

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

（3）为父容器container添加padding

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

此时在浏览器中的效果为：

在这里插入图片描述
出现这种现象的原因是：

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

在这里插入图片描述

（4）.left的移动（重点）

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

在这里插入图片描述
为.left单独添加样式：

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

此时在浏览器中的效果为：

在这里插入图片描述

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

在这里插入图片描述

padding是在实际内容content之外的，内部子元素设置margin只能在这个content区域内。因此上面我们设置.left{margin-left:-100%}没有到达左侧的蓝色padding区块就是这样的原因。

当然我们可以看一下此时继续设置.left{margin-left:-200px}的效果：

此时.left的样式为：

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

此时在浏览器中的效果为：

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

因此我们为.left加入定位样式：

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

此时在浏览器中的效果为：

在这里插入图片描述

可以看到效果跟我们所预期的是一样的。

（5）.right的移动

明白.left的移动后，.right的移动就很容易了。我们同样使用margin，移动和.right宽度一致的宽度可以使它移动到如下位置（下图中黄色框）：

在这里插入图片描述
不会直接移动到蓝色框和上面的.left是同样的原因。

接下来我们为.right添加margin-left:-200px的样式：

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

此时在浏览器中的效果为：

在这里插入图片描述
结果跟我们想的一样，接下来我们只需要通过定位将.right的绿色区块移动到右侧蓝色区块即可：

在这里插入图片描述

为.right添加position样式：

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

此时在浏览器中的效果为：

在这里插入图片描述

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

热爱技术，热爱分享，一起学习，一起进步！

fltenwall

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
详解圣杯布局

圣杯布局html结构：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc...
复制链接

扫一扫