CSS3圣杯布局

最新推荐文章于 2023-09-02 14:57:27 发布

丶帆

最新推荐文章于 2023-09-02 14:57:27 发布

阅读量157

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/yf19990720/article/details/107618859

版权

CSS3圣杯布局

圣杯布局：左右两列宽度固定，中间列自适应。圣杯布局，是学习css3后，常见的布局之一。
窗口最大化示例：
在这里插入图片描述
窗口缩小后，两边宽度不变，中间缩小：

源码

先设置一个头部，中间，底部。中间又分为左中右三部分。

<div class='container'>

        <header>头部</header>
        <section>
            <div class='left'>左</div>
            <div class='center'>中</div>
            <div class='right'>右</div>
        </section>
        <footer>底部</footer>

    </div>

添加css样式

 * {
            margin: 0;
            padding: 0;  //清除浏览器的内外边距
        }
        
        .container {		
            display: flex;
            height: 100vh;
            flex-direction: column;	//设置 <div> 元素内弹性盒元素的方向
        }
        
        header {
            background: #888888; //头部加一个背景颜色
        }
        
        section {
            flex: 1;		//让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：
            background: pink;
            display: flex;
        }
        
        footer {
            background: #ccc;
        }
        
        .left {
            background: orangered;
            flex: 0 0 100px;		//flex-grow: 0; flex-shrink: 0; flex-basis: 100px;
       }
        
        .center {
            flex: 1;		//flex-grow: 1;    flex-shrink: 1;    flex-basis: 0%;
            background: skyblue;
        }
        
        .right {
            flex: 0 0 100px;	//flex-grow: 0; flex-shrink: 0; flex-basis: 100px;
            background: orange;
        }

以上就是圣杯布局的基本样式了
最后合并代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .container {
            display: flex;
            height: 100vh;
            flex-direction: column;
        }
        
        header {
            background: #888888;
        }
        
        section {
            flex: 1;
            background: pink;
            display: flex;
        }
        
        footer {
            background: #ccc;
        }
        
        .left {
            background: orangered;
            flex: 0 0 100px;
        }
        
        .center {
            flex: 1;
            background: skyblue;
        }
        
        .right {
            flex: 0 0 100px;
            background: orange;
        }
    </style>
</head>

<body>

    <div class='container'>

        <header>头部</header>
        <section>
            <div class='left'>左</div>
            <div class='center'>中</div>
            <div class='right'>右</div>
        </section>
        <footer>底部</footer>

    </div>

</body>

</html>

丶帆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3圣杯布局

CSS3圣杯布局圣杯布局：左右两列宽度固定，中间列自适应。圣杯布局，是学习css3后，常见的布局之一。窗口最大化示例：窗口缩小后，两边宽度不变，中间缩小：源码先设置一个头部，中间，底部。中间又分为左中右三部分。<div class='container'> <header>头部</header> <section> <div class='left'>左</div&gt
复制链接

扫一扫