css经典布局:圣杯布局和双飞翼布局的实现和理解

·  阅读 142

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

圣杯布局和双飞翼布局是css的经典布局,也是大厂前端面试的高频考点。

两个布局的实现很简单,但是想要理解实现方法背后的原理却并不简单,本篇文章会带你一点一滴刨析,让你不仅仅是会用,话不多说,走起~

圣杯布局

圣杯布局如图:

在这里插入图片描述

而且要做到左右宽度固定,中间宽度自适应。

1. 利用flex布局

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            height: 40px;
            width: 100%;
            background: red;
        }

        .container {
            display: flex;
        }

        .left {
            width: 200px;
            background: yellow;
        }

        .middle {
            flex: 1;
            background: pink;
        }

        .right {
            width: 250px;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="left">left</div>
        <div class="middle">middle</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>
复制代码

在这里插入图片描述

2. float布局

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            height: 40px;
            width: 100%;
            background: red;
        }

        .footer {
        	/* footer 清除浮动 */
            clear: both;
        }

        .container {
            padding-left: 200px;
            padding-right: 250px;
        }

        .container div {
            position: relative;
            float: left;
        }

        .middle {
            width: 100%;
            background: yellow;
        }

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

        .right {
            width: 250px;
            background: blue;
            margin-left: -250px;
            left: 250px;
        }
    </style>
</head>

<body>
    <div class="header">这里是头部</div>
    <div class="container">
        <div class="middle">中间部分</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">这里是底部</div>
</body>

</html>
复制代码

在这里插入图片描述 这种float布局是最难理解的,主要是浮动后的负margin操作,下面我们详细解析:

首先要注意我们实现该布局的三个盒子的父盒子宽度不是100%,左右是添加了padding的.container {padding-left: 200px;padding-right: 250px;} ,而左右的padding值正是left和right的宽度。

其次,非常重要的一个概念,子盒子里的margin值的百分比是基于父盒子的。

F12打开控制台,我们去掉left和right最难理解的样式:

在这里插入图片描述

在这里插入图片描述

激活left的margin-left(注意:实践时逐渐改变这些值可以非常直观的理解原理),因为margin的100%是基于父盒子的,所以我们发现left逐渐往左移动,超出父盒子边界(margin的负值边界是基于父盒子的边界),当margin-left: -200px;时,left就顶到上层,处于最右边的位置了。

在这里插入图片描述

margin-left: -100%;时,处于最左边的位置了。

在这里插入图片描述

这时候,再让left往左移动一个自身的宽度:添加left: -200px;(left值也是基于父盒子的边界),就到我们的目标位置了。

在这里插入图片描述

同理,对于right:当margin-left: -250px;时,right就顶到上层,处于最右边的位置。

在这里插入图片描述

这时候,再让right往右移动一个自身的宽度:添加left: 250px;(注意:向右移动是正值哦,上面的是向左移动,所以是负值left: -200px;,不要记混了),就到我们的目标位置了。

在这里插入图片描述

到此,实现圣杯布局并且对他的原理进行了解析。

双飞翼布局

在这里插入图片描述

有了圣杯布局的铺垫,双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            min-width: 600px;
        }

        .left {
            float: left;
            width: 200px;
            height: 400px;
            background: red;
            margin-left: -100%;
        }

        .center {
            float: left;
            width: 100%;
            height: 500px;
            background: yellow;
        }

        .center .inner {
            margin: 0 200px;
        }

        .right {
            float: left;
            width: 200px;
            height: 400px;
            background: blue;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <article class="container">
        <div class="center">
            <div class="inner">双飞翼布局</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </article>
</body>

</html>
复制代码

双飞翼布局实现的原理,参考上面圣杯布局的解析。

注意:双飞翼布局的left和right是在主盒子里面,而不是在外面,所以我们只需要通过marin-left的负值就可以实现,不需要通过设置left再往左或者往右移动。

为什么center中间还要加一个inner呢?而且inner还要设置margin: 0 200px;

<div class="center">
   <div class="inner">双飞翼布局</div>
</div>
复制代码
.center .inner {
    margin: 0 200px;
}
复制代码

这也算是双飞翼布局的一点要点,添加的inner以及他的margin: 0 200px;正是双飞翼布局中间部分布局的核心,如果没有这点,就不是完整的双飞翼布局。这个inner就是我们以后在该布局中间区域添加内容的父盒子(或者说是顶层盒子)。

分类:
前端
标签: