圣杯布局

最新推荐文章于 2023-04-18 17:10:40 发布

金正同学

最新推荐文章于 2023-04-18 17:10:40 发布

阅读量172

点赞数 1

分类专栏：学习总结文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43898497/article/details/114852253

版权

学习总结专栏收录该内容

10 篇文章

订阅专栏

圣杯布局的理解

什么是圣杯布局？如下图
图中两侧（left与right）width不变，中间width随容器改变而发生改变。
left标签位置：难点：margin-left的负值问题：可知margin-left值为正时，即对应标签左侧的空隙变大；同理，其值为负时，则左侧的间隙变小；当margin-left值为-100%时，可以理解成消去了此标签这一行的空隙，形象的看成平移到上面一行的同垂直位置。如下图：
注意，margin-left是标签left的属性，当margin-left：-100% 时，对right也产生了影响；上图可看到right位置移到了原来的left位置；

为了让left到达指定位置，即middle的左侧空白位置，可设置left：-200px，如下图：
right标签位置：此时right左侧位置就是200px，为了达到同行显示，可以设置 margin-left：-200px；如下图：
中间 “ 此处middle ” 两侧空白是其父元素content的属性padding：0 200px设置得来（content中内容区变小），当margin-left：-200px时，right先是移动到了middle的边框中，可知，属性margin参照于content包含块；设置right：-200px到达指定位置

小结：对于三列布局，此三列都需要浮动float；两侧还需要相对定位relative;HTML布局中，标签middle要放在第一位（较于标签 left 与 right ）;
参考代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯模型</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 600px;
        }
        #header{
            margin-top: 50px;
        }
        #header,#footer{
            text-align: center;
            background: #cecece;
            color: #ffffff;
            border: #999999;
        }
        #content{
            padding: 0 200px;
        }
        .middle{
            float: left;
            width: 100%;
            background: #bbaaff;
            text-align: center;
        }
        .left{
            margin-left: -100%;
            left: -200px;
            background: yellow;
        }
        .right{
            margin-left: -200px;
            right: -200px;
            background: #1BC7FB;
        }
        .left,.right{
            float: left;
            position: relative;
            width: 200px;
            text-align: center;
        }

        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
    <div class="middle">此处middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>