01-css经典布局整理-圣杯布局

最新推荐文章于 2025-03-17 17:58:34 发布

不及你笑靥如花

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量814

点赞数 1

分类专栏： HTML+CSS基础知识 css经典布局文章标签： css 定位 html

本文链接：https://blog.youkuaiyun.com/qq_43775721/article/details/117447845

版权

HTML+CSS基础知识同时被 2 个专栏收录

10 篇文章

订阅专栏

css经典布局

2 篇文章

订阅专栏

圣杯布局

一、圣杯布局基本概论
二、圣杯布局的原理
三、圣杯布局的完整代码

一、圣杯布局基本概论

圣杯布局指的是左右两栏固定宽度，中间部分自适应。如下

在这里插入图片描述

二、圣杯布局的原理

在这里插入图片描述

首先写出整体的布局（header+content+footer）,其中content中包括center、left、right。一定是center在前，left在中，right在后。

    <header>header</header>
    <div id="content">
        <div id="center" class="cloumn">center</div>
        <div id="left" class="cloumn">left</div>
        <div id="right" class="cloumn">right</div>
    </div>
    <footer>footer</footer>

构思left，right、center的宽度，并且给content设置上响应的左右边距。left中的width一定是和content的padding-left的大小一致；right中的width一定是和content的padding-right的大小一致;center的宽度为100%。

        #content {
            padding-left: 300px;
            padding-right: 200px;
        }
        
        #center {
            width: 100%;
        }
        
        #left {
            width: 300px;
        }
        
        #right {
            width: 200px;
        }

要给center、left，right加上一个左浮动

        .cloumn {
            float: left;
        }

在这里插入图片描述

把eft移动到center的左边。分为2个步骤:
a、把left移上去（margin-left: -100%是固定的，把left移动到content里面的最左边，%相对于父级定位）

       #left {
            width: 300px;
            margin-left: -100%;
            background-color: darkcyan;
        }

在这里插入图片描述
b、把left移到center的左边（right中定位距离与left盒子的宽度一致）

       #left {
            position: relative;
            width: 300px;
            margin-left: -100%;
            right: 300px;
            background-color: darkcyan;
        }

在这里插入图片描述

把right移动到center的右边边。（margin-right与right盒子的宽度一致）

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

在这里插入图片描述

三、圣杯布局的完整代码

<!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>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        header {
            background-color: #ccc;
        }
        
        #content {
            padding-left: 300px;
            padding-right: 200px;
        }
        
        #center {
            width: 100%;
            background-color: cyan;
        }
        
        #left {
            position: relative;
            width: 300px;
            background-color: darkcyan;
            margin-left: -100%;
            right: 300px;
        }
        
        #right {
            width: 200px;
            background-color: yellow;
            margin-right: -200px;
        }
        
        .cloumn {
            float: left;
        }
        
        footer {
            clear: both;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <h1>圣杯布局</h1>
    <header>header</header>
    <div id="content">
        <div id="center" class="cloumn">center</div>
        <div id="left" class="cloumn">left</div>
        <div id="right" class="cloumn">right</div>
    </div>
    <footer>footer</footer>
</body>

</html>