css面试题-圣杯布局

最新推荐文章于 2024-06-19 20:49:09 发布

楼兮诺

最新推荐文章于 2024-06-19 20:49:09 发布

阅读量199

点赞数

分类专栏： html & css 文章标签： css html 面试

本文链接：https://blog.csdn.net/louxinuo/article/details/120807091

版权

html & css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

圣杯布局网上的其他资料讲的已经非常清晰了，这里主要提供练习源码和实现过程及原理分析

一、圣杯布局是什么？

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局（左中右）。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域（中间占满剩余宽度）。

以上内容引自这里

二、圣杯布局的练习源码

2.1 完整初始源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            min-width: 550px;
        }
        #header {
            text-align: center;
            background-color: #f1f1f1;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }
        #left {
            background-color: yellow;
            width: 200px;
        }
        #right {
            background-color: red;
            width: 150px;
        }

        #footer {
            text-align: center;
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

2.2 初始效果预览

在这里插入图片描述

2.3 将要实现的效果

在这里插入图片描述

三、实现圣杯布局使用的主要技术

float、margin、padding、position等

四、圣杯布局实现过程

4.1 为 .container 中的左中右三个盒子增加左浮动

代码：

        #header {
            text-align: center;
            background-color: #f1f1f1;
        }
        /* 在这里添加浮动 ------------------------------*/
        #container .column {
            float: left;
        }

        #center {
            background-color: #ccc;
            width: 100%;
        }

实现效果

可以看到，因为浮动原因，后边的 footer 顶了上来

4.2 清除浮动影响

代码：

/* 在这里清除浮动 ---------------------------- */
        #footer {
            clear: both;
            text-align: center;
            background-color: #f1f1f1;
        }

实现效果：

给 footer 盒子，清除了浮动的影响

4.3 为了让左右两侧盒子在随后的布局中，不遮盖中间的center，我们先使用padding 将它们的父盒子挤一下，左侧padding值为左侧盒子的宽度，右侧padding值为右侧盒子的宽度

代码：

		#header {
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 在这里挤一下 ----------------------------- */
        #container {
            padding-left: 200px;
            padding-right: 150px;
        }

        /* 添加浮动 */
        #container .column {
            float: left;
        }

实现效果：

可以看到，在 container 盒子的两侧，已经留出了空间，这个时候我们应该想办法让左侧盒子，在center盒子的左边一行显示，右侧盒子，在center盒子的右侧一行显示

4.4 左侧盒子利用 margin-left: -100%; 实现和center盒子一行显示

知识储备：
1.在添加margin属性，使用百分比时，百分比的值是相对与该元素的元素的
2.margin-top 和 margin-left 负值，元素向上、向左移动
3.margin-right负值，右侧元素左移，自身不受影响
4.margin-bottom负值，下方元素上移，自身不受影响
5.margin负值具体可参考我的这篇博客点我
代码：

		#center {
            background-color: #ccc;
            width: 100%;
        }
        /* 添加  margin-left: -100%; -----------------*/
        #left {
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
        }
        #right {
            background-color: red;
            width: 150px;
        }

实现效果：

可以清楚的看到，左侧盒子已经跑到了 center 盒子一行上，这是为什么呢？
原因是因为我们为左侧盒子设置了 margin-left:-100%; 我们知道，当margin-left为负值的时候，元素向左移动，同时，因为我们设置的值为 -100%，也就是left盒子向左移动一个父盒子宽度的距离。
正因如此，左侧盒子才和中间盒子实现了左对齐

4.5 使用相对定位，使左侧盒子左移自身距离，防止遮盖中间盒子

代码：

#center {
            background-color: #ccc;
            width: 100%;
        }
        /* 左移自身距离，防止遮盖中间盒子---------------*/
        #left {
            position: relative;
            right: 200px;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
        }
        #right {
            background-color: red;
            width: 150px;
        }

实现效果

这个时候，我们左侧盒子的布局已经搞定了

4.6 使用margin-right负值，实现右侧盒子和中间盒子同行显示

知识储备：margin-right负值，右侧元素左移，自身不受影响
代码：

		#left {
            position: relative;
            right: 200px;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
        }
        /* 添加负自身距离的数值-------------------- */
        #right {
            margin-right: -150px;
            background-color: red;
            width: 150px;
        }

实现效果

到这里就大功告成了，但是肯定会有不少同学会有疑问，为什么右侧盒子设置了 margin-right:-150px; ，自身就跑到了和 center盒子一行上了。

原因是因为，设置了margin-right为负时，右侧的盒子左移，当前元素的宽度应当为自身宽度 150px 减去 margin-right的宽度150px，此时当前元素的宽度为0，也就是right 盒子相当于外界来说，是不存在的，所以 footer 盒子才能顶上来，没有宽度的 right 盒子，才能够和 center 盒子处于一行显示。

比较难理解，可以再研究一下我这篇博客中关于 margin-right 为负值的问题

五、圣杯布局最终效果展示

在这里插入图片描述

楼兮诺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css面试题-圣杯布局

圣杯布局网上的其他资料讲的已经非常清晰了，这里主要提供练习源码和实现过程及原理分析一、圣杯布局是什么？header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局（左中右）。三栏布局两侧宽度固定不变，中间部分自动填充整个区域（中间占满剩余宽度）。以上内容引自这里二、圣杯布局的练习源码2.1 完整初始源码<!DOCTYPE html><html><head> <meta charset="UT.
复制链接

扫一扫