前端面试之圣杯布局与双飞翼布局

最新推荐文章于 2022-09-16 18:01:35 发布

那你帮帮我吧

最新推荐文章于 2022-09-16 18:01:35 发布

阅读量181

点赞数

分类专栏： HTML&CSS学习分享文章标签： css

本文链接：https://blog.csdn.net/wyh__2000/article/details/118549352

版权

HTML&CSS学习分享专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局是前端CSS布局面试中常见的面试题，研究了一番其实现原理并手敲了遍代码，现在将自己的学习感悟分享给大家。

这两种布局其实实现效果是相同的只是实现方法不同，最终效果如图:
布局效果展示
布局要求是：

上下两栏高度固定，宽度自适应
中间三栏的高度固定，左右模块宽度固定，中间模块宽度自适应

圣杯布局固定布局思路分析：

上下两栏设置高度不设置宽度实现宽度自适应
中间栏的三模块设置浮动、相对定位、高度
中间栏开启BFC（overflow:hidden）解决浮动带来的高度塌陷问题
中间栏的中间模块设置width:100%;实现宽度自适应，左右模块设置固定宽度，中间栏设置左右的padding为左右模块留出空间
给中间栏的左模块设置margin-left:-100%;移动到中间模块的最左边；再设置left:-200px;到达浏览器的最左边位置
给中间栏的右模块设置margin-left:-150px;移动到中间模块的最右边；再设置right:-150px;到达浏览器的最右边位置

圣杯布局固定布局的具体代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圣杯布局案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 650px;           /*设置浏览器最小可见宽度*/
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        header,
        footer {                        /*不设宽度使其宽度自适应*/
            height: 60px;
            line-height: 60px;
            background-color: #333333;
        }

        main {
            overflow: hidden;           /*开启BFC，解决高度塌陷问题*/
            padding-left: 200px;        /*给三栏布局的左右模块留出相应的位置*/
            padding-right: 150px;
        }

        main section {
            float: left;
            position: relative;
            height: 600px;
            line-height: 600px;
        }

        main section:nth-child(1) {
            width: 100%;                /*使三栏布局的中间模块宽度占满，实现宽度的自适应*/
            background-color: #66FF66;
        }

        main section:nth-child(2) {
            width: 200px;
            background-color: #9999FF;
            margin-left: -100%;         /*使左边模块到中间模块的最左边位置*/
            left: -200px;               /*使左边模块移动到浏览器左边位置*/
        }

        main section:nth-child(3) {
            width: 150px;
            background-color: #FF99FF;
            margin-left: -150px;        /*使右边模块到中间模块的最右边位置*/
            right: -150px;              /*使右边模块移动到浏览器右边位置*/
        }

        footer {                        /*清除前面元素浮动带来的影响*/
            clear: both;
        }
    </style>
</head>

<body>
    <header>header</header>
    <main>
        <section>center</section>
        <section>left</section>
        <section>right</section>
    </main>
    <footer>footer</footer>
</body>

</html>

双飞翼布局固定布局思路分析：

上下两栏设置高度不设置宽度实现宽度自适应
中间栏的三模块设置浮动、高度
中间栏开启BFC（overflow:hidden）解决浮动带来的高度塌陷问题
中间栏的中间模块设置width:100%;实现宽度自适应，左右模块设置固定宽度，中间栏的中间模块的内模块设置margin-left和margin-right为左右模块留出空间
给中间栏的左模块设置margin-left:-100%;移动到浏览器最左边
给中间栏的右模块设置margin-left:-150px;移动到浏览器最右边

双飞翼布局固定布局的具体代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>双飞翼布局案例</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 650px;
            /*设置浏览器最小可见宽度*/
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        header,
        footer {
            /*不设宽度使其宽度自适应*/
            height: 60px;
            line-height: 60px;
            background-color: #333333;
        }

        main {
            overflow: hidden;
            /*开启BFC，解决高度塌陷问题*/
        }

        main>article,
        main>section {
            float: left;
            height: 600px;
            line-height: 600px;
        }

        main>article {
            width: 100%;
            /*使三栏布局的中间模块宽度占满，实现宽度的自适应*/
        }

        main>article>section {
            margin: 0 150px 0 200px;
            /*设置三栏布局的中间模块的内模块的左右margin为左右模块留出空间*/
            background-color: #66FF66;
        }

        main section:nth-child(2) {
            margin-left: -100%;
            width: 200px;
            background-color: #9999FF;
        }

        main section:nth-child(3) {
            margin-left: -150px;
            width: 150px;
            background-color: #FF99FF;
        }
    </style>
</head>

<body>
    <header>header</header>
    <main>
        <article>
            <section>center</section>
        </article>
        <section>left</section>
        <section>right</section>
    </main>
    <footer>footer</footer>
</body>

</html>

弹性布局实现圣杯（双飞翼）布局：
这种方法只要了解弹性布局很容易理解我就不分析了直接上代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>双飞翼布局案例</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 650px;
            /*设置浏览器最小可见宽度*/
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-align: center;
        }

        header,
        footer {
            /*不设宽度使其宽度自适应*/
            height: 60px;
            line-height: 60px;
            background-color: #333333;
        }

        main {
            display: flex;
        }

        main section {
            height: 600px;
        }

        main section:nth-child(1) {
            flex: 1;
            background-color: #66FF66;
        }

        main section:nth-child(2) {
            order: -1;
            flex-basis: 200px;
            background-color: #9999FF;
        }

        main section:nth-child(3) {
            flex-basis: 150px;
            background-color: #FF99FF;
        }
    </style>
</head>

<body>
    <header>header</header>
    <main>
        <section>center</section>
        <section>left</section>
        <section>right</section>
    </main>
    <footer>footer</footer>
</body>

</html>

那你帮帮我吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试之圣杯布局与双飞翼布局

圣杯布局和双飞翼布局是前端面试常见的面试题，今天研究了一番<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫