关于圣杯布局中，margin-left：-100% 的解释

xiaoJie_Fighting

于 2023-05-08 01:00:08 发布

阅读量729

点赞数 2

文章标签： css html5 css3

本文链接：https://blog.csdn.net/m0_59132472/article/details/129761215

版权

一、序言：

最近在复习CSS布局的时候，想试着写一些经典的布局的案例，然后就写到了圣杯布局。CSS布局一直是前端开发中的重要课题，而圣杯布局则是一种经典的布局方式。刚好还发现了一些有趣的地方或者说是坑点，所以写了一篇文章在这里记录一下，也欢迎大家一起学习和探讨。

二、什么是圣杯布局？

首先我们得知道什么是圣杯布局，它的布局方式是怎样的呢？

圣杯布局是指，一个网页中有三列，其中中间的一列是主要的内容区域，两侧的列则是辅助内容区域。它们的宽度可以根据不同的需求而定，但内容区的宽度要始终保持为页面宽度减去两侧列的宽度。具体来说，圣杯布局中：

主要内容区的宽度为auto。
左右两侧列的宽度可以固定，可以是百分比，也可以是最大宽度。
三列的视觉顺序是：左侧列、主要内容区、右侧列。

! ! ! 注意 ：圣杯布局中这三列的渲染顺序为：主要内容区、左侧列、右侧列，所以布局的HTML结构如下所示：

 <header>头部区域</header>
    <div class="wrapper">
        <div class="middle">中间自适应区域</div>
        <div class="left">左边定宽区域</div>
        <div class="right">右边定宽区域</div>
    </div>
 <footer>底部区域</footer>

三、怎么实现圣杯布局？

现在，我们简单地了解了什么是圣杯布局之后，就来想想该怎么实现它呢？

实现圣杯布局的方法有很多种，其中一种比较典型的做法是使用浮动和负 margin 来实现。

我们先来做做看：

首先，我们用 HTML 结构构建出三列内容区域，其中主内容区放在前面，两侧列放在后面。并将它们的 CSS 样式设为float:left。

<div class="container">
  <div class="main">主要内容区</div>
  <div class="left">左侧内容区</div>
  <div class="right">右侧内容区</div>
</div>

.container, .main, .left, .right {
   float: left;
}
.main {
    width: auto;
}

2.然后，我们再给每一个子元素添加一个宽度，例如：主要内容区main宽度为100%。

.main {
    width: 100%;
}

3.再使用margin-left和margin-right负值的方式，让左、右两个元素移动到相应的位置上。margin-left:-100%的含义是左侧元素向左移动主元素的宽度为100%的距离，也就是挤到了主内容区的左边面。同理，margin-right:-200px表示右侧元素向左移动200px的距离，然后给左、右两个元素定宽度。

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

4.最后，为了更加清楚地看到布局效果，我们通过添加一个容器来给左、右两侧的元素设置背景色。

完整的代码如下所示：

<style>
    .container, .main, .left, .right {
        float: left;
    }

    .main {
        width: 100%;
    }

    .left {
        width: 200px;
        margin-left: -100%;
        background-color: #eee;
    }

    .right {
        width: 200px;
        margin-right: -200px;
        background-color: #ccc;
    }

</style>



<body>
    <div class="container">
        <div class="main">主要内容区</div>
        <div class="left">左侧内容区</div>
        <div class="right">右侧内容区</div>
    </div>

</body>