css圣杯布局是什么？

圣杯布局是什么

• 三列布局，中间宽度自适应，两边定宽；

• 中间栏要在浏览器中优先展示渲染；

实现

HTML代码如下：

<div id="container">
    <div id="middle">middle</div>
    <div id="left">left</div>
    <div id="right">right</div>
 </div>

实现一：使用浮动

1、先给左右列固定宽度，然后给中间列的宽设为100%，都设置为向左浮动：

#middle {
    background-color: lightpink;
    height: 300px;
    width: 100%;
    float: left;
}

#left {
    background-color: red;
    height: 300px;
    width: 100px;
    float: left;
}

#right {
    background-color: aqua;
    height: 300px;
    width: 100px;
    float: left;
}

此时它的效果为：

2、让左右列与中间列显示在一行

给#left设置margin-left: -100%;，给#right设置margin-left: -100px;，那么此时我的页面显示为：

但是有没有发现我的middle这个字不见了，那是因为被压住了，此时我的左右列覆盖到了中间列上面

3、中间盒子自适应

那么想让中间盒子自适应，就给我们的父元素加padding值：

#container {
    padding: 0 100px;
}

此时的效果为：

与上面的图相比，两边多了空，那么此时我的middle还是没有出现，所以说明我的左右两列还是压着中间那列的，所以我们就应该将左右两列给加定位，然后让他们分别向左右移动：

#left {
    position: relative;
    left: -100px;
}
#right {
    position: relative;
    right: -100px;
}

此时我们的圣杯布局就完成啦：

实现二：用flex布局

使用flex布局就简单多了呢，代码如下：

#middle {
    background-color: lightpink;
    height: 300px;
    display: flex;
    flex:1;/*简写，1,1，auto的意思*/
}

#left {
    background-color: red;
    height: 300px;
    flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/
    order:-1;/*设置left的位置在middle之前*/
}

#right {
    background-color: aqua;
    height: 300px;
    flex: 0 0 100px;/*默认为横向的，所以这里的100px相当于宽度*/
}

#container{
    display: flex;
    flex:1;/*简写，1,1，auto的意思*/
}

那么我们的圣杯布局也就完成啦：

更多前端开发知识，请查阅 HTML中文网 ！！

以上就是css圣杯布局是什么？的详细内容，更多请关注0133技术站其它相关文章！