html+css：“圣杯布局”的设计案例-526互联

一、什么是圣杯布局

圣杯布局：左右两个盒子固定宽度，中间盒子自适应

二、圣杯布局的设计原则：

我们现在来思考自适应这个问题，其本质就是 left 和 right 覆盖一整个大的center，

然后center使用padding把内容左右留出left和right相应的宽度。

可是，现在如何来覆盖呢？

这里使用 margin + 负值的策略，margin-left：-100%，表示移动到最右侧，而margin-right: -100% 表示移动到盒子的最左侧

然后使用 box-sizing: border-box; 对center时添加padding时不会撑开盒子的大小！！

三、整体的设计思路：

1. 整个盒子宽度固定下来；

2. 里面三个子盒子，依次是center,left,right，对其设置浮动；

3. center盒子width设置100%，left和right盒子设置为固定的px值；

4. 对left这边，margin-right: -100%，往左边移动，另外对right这边，margin-right:100%，往右边移动

5. 对center设置 padding-left: 200px;box-sizing: border-box; padding-right: 100px; 避免覆盖里面的内容，这个其实很简单。

四、下面是完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{
            width: 80%;     /* %相对单位，相对于盒子的宽度来决定*/
            height: 200px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .child{
            height: 200px;
            float: left;
        }
        .center{
            width: 100%;
            background-color: skyblue;
            padding-left: 200px;
            box-sizing: border-box;
            padding-right: 100px;
        }
        .left{
            width: 200px;
            background-color: pink;
            margin-left: -100%;
        }
        .right{
            width: 100px;
            background-color: green;
            margin-right: -100px;
        }
    </style>
    <!-- 

        圣杯布局：左右两个盒子固定宽度， 中间盒子自适应

        1、结构布局比较特殊：   center的盒子放在最前面
        2、通过给左盒子margin-left: -100%;  右盒子margin-left: -右盒子宽度 ，让左右俩盒子在正确的位置
        3、第2步会导致中间盒子被覆盖。所以给中间盒子加padding-left 和padding-right 和box-sizing: border-box;
     -->
</head>
<body>
    <div class="box">
        <div class="child center">center </div>
        <div class="child left">left</div>
        <div class="child right">right</div>
    </div>


</body>
</html>