圣杯布局01-浮动加定位进行布局

最新推荐文章于 2024-07-08 18:44:35 发布

bubbleTg

最新推荐文章于 2024-07-08 18:44:35 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端

本文链接：https://blog.youkuaiyun.com/qq_36570464/article/details/108826457

web前端专栏收录该内容

15 篇文章

订阅专栏

圣杯布局01-浮动加定位进行布局

什么是圣杯布局

圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》。比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。

圣杯布局要求

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

原理：

下面介绍说说理由圣杯布局，利用浮动和定位来进行布局的。

给article 左右一个padding。
让article 中的三个浮动起来，主要是让它们在一条线上，然后在article中清除浮动
设置article中三个的宽度和高度，左右两个的宽度为article 的左右padding，中间的宽度为100%，高度都为100%。
上面基本完成了页面的大小设置，下面开始设置摆放位置，给aritcle 中的左右盒子设置绝对定位，当然要相对他们父亲进行绝对定位，所以要给aritcle 设置相对定位。
然后设置aritcle 中的左右盒子，分别靠近左边和右边。
就这完成了

代码片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
    <title>Document</title>
    <style>
        body {
            max-width: 1024px;
            min-width: 320px;
            margin: 0 auto;
            font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
            color: #000;
            background: #f2f2f2;
            overflow-x: hidden;
            -webkit-tap-highlight-color: transparent;
        }
        
        header,
        footer {
            width: 100%;
            height: 60px;
            background-color: pink;
        }
        
        article {
            position: relative;
            padding: 0 60px;
            overflow: hidden;
        }
        
        article>div:nth-of-type(1),
        article div:nth-of-type(2),
        article>div:nth-of-type(3) {
            float: left;
        }
        
        article>div:nth-of-type(1),
        article>div:nth-of-type(3) {
            position: absolute;
            width: 60px;
            height: 100%;
            background-color: red;
        }
        
        article>div:nth-of-type(1) {
            left: 0;
        }
        
        article>div:nth-of-type(3) {
            right: 0;
        }
        
        article div:nth-of-type(2) {
           /* position: relative;  //无意义*/
            width: 100%;
        }
    </style>
</head>

<body>
    <header>
        header 这是头部
    </header>
    <article>
        <div>
            这是左边
        </div>
        <div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <div style="background-color: sandybrown;">
                这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容 这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容这是类容
            </div>
            <span>这是内容这是内容这是内容这是内容这是内容这是内容</span>
        </div>
        <div>
            这是右边
        </div>
    </article>
    <footer>
        footer 这是底部
    </footer>


</body>

</html>