圣杯布局-面试高频考点

仙鹤__

已于 2023-04-03 23:24:21 修改

阅读量115

点赞数

文章标签： html css 前端

于 2023-04-03 22:58:08 首次发布

本文链接：https://blog.csdn.net/weixin_52629158/article/details/129942016

版权

圣杯布局的实现方式有4种，分别是通过float浮动实现、通过position定位实现、通过flex弹性布局实现、通过grid网格布局实现。

我们先掌握，通过浮动float如何实现圣杯布局？

什么叫圣杯布局？

圣杯布局就是左右两边大小固定不变，中间宽度自适应。

例1：

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

<style>
    *{
        margin: 0;
        padding: 0;

    }
    .header{
        height: 120px;
        background-color: #5B5A5A;

    }
    .container{
       overflow: hidden;
       padding-left:500px;
       padding-right:150px;
    }
    .footer{
        height: 150px;
        background-color: #5B5A5A;
    }
    .container .left, .container .center, .container .right{
        height: 900px;
        float:left;
    }
    .container .left{
        width: 500px;
        margin-left:-500px;
        background-color: #63B5EC;
    }
    .container .center{
        background-color: #CEC9C9;
        width: 100%;
    }
    .container .right{
        width: 150px;
        background-color: #E76902;
        margin-right:-150px;

    }
    </style>
</head>
<body>
    <!-- 圣杯布局就是左右两边大小固定不变，中间宽度自适应。 -->
    <div class="header"></div>
    <div class="container">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>

预览效果：