css圣杯布局

最新推荐文章于 2023-07-31 14:05:04 发布

LZC_yEllOwBooK

最新推荐文章于 2023-07-31 14:05:04 发布

阅读量632

点赞数 3

分类专栏： flex布局圣杯布局文章标签： css html html5

本文链接：https://blog.csdn.net/lzc_yellowbook/article/details/119994637

版权

flex布局同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

圣杯布局

1 篇文章 0 订阅

订阅专栏

不知道要说点什么，直接上图吧！

1.利用flex布局

 <style>
        .father{
            height: 100px;
            display: flex;
            /* 因为div独占整行，所以不需要设置宽度 */
        }
        .left,.right{
            width: 100px;
            background-color: red;
            /* 没有flex为1这个属性的情况下，是不允许缩放的，所以要给宽度 */
        }
        .center{
            flex: 1;
            /* 使用flex布局，缩放填充整行 */
            background-color: yellow;
        }
        /* 子元素都没有给高度而出现高度，是应为flex布局会继承高度 */
    </style>
</head>
<body>
    <div class="father">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

使用flex布局方法，实现圣杯布局是最方便的，只需要两边定死，中间给flex：1，让他缩放就可以完成了

个人推荐使用这种方法！

2.利用浮动完成圣杯布局

<style>
       .left{
           width: 100px;
           height: 100px;
           float: left;
           background-color: red;
           /* 利用浮动，把左边盒子浮动到左上角 */
       }
       .right{
           width: 100px;
           height: 100px;
           background-color: red;
           float: right;
           /* 利用浮动，把左边盒子浮动到右上角 */
       }
       .center{
           margin: 0 100px;
           background-color:yellow;
           height: 100px;
           /* 因为之前的盒子都脱离了文本流，所以此盒子就会和上边的盒子在一行 */
       }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</body>

此方法要注意一下几个点：

1.中间盒子要放在最下边，应为浮动元素，前一个盒子没有浮动效果的情况下，只会从当前位置开始浮动，如果把中间盒子放在最上边会出现这样的结果

2.中间的盒子一定要给边距，切边距和两边的宽度要一致，为了方便观察，我给红色盒子加了透明度

！！！这是加了边距的

！！！这是没有加边距的，由此，我们可以得出结论，没有边距的情况下，内容会被浮动起来元素覆盖掉！

在这里有要说一个有意思的东西，我为什么不用文字来演示呢？

文字被div覆盖时，会在没有被覆盖的地方显示，要是整个div被覆盖的情况下，会在div外显示哦！

(手动伸手表情)喏！没有被覆盖完，和被覆盖完后文字的位置如下：

总结一下：1.要注意书写顺序

2.要注意边距问题

剩下的倒是没有什么了！

3.利用定位完成圣杯布局

<style>
         .center{
          margin: 0 300px;
           background-image: url(./OIP-C.jpg);
           background-size: 100% 100%;
           height: 300px;
           position: relative;
           /* 给个相对定位，子绝父相方法，让里边的盒子以center为基准 */
       }
       .left{
           width: 300px;
           height: 300px;
           position:absolute;
           left: -300px;
           background-color: rgba(255,0,0,0.5);
           /* 把盒子定位到右上角再减去自身的宽度 */
       }
       .right{
           width: 300px;
           height: 300px;
           background-color: rgba(255,0,0,0.5);
           position:absolute;
           right: -300px;
           /* 把盒子定位到右上角再减去自身的宽度 */
       }
    </style>
</head>
<body>
    <div class="center">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

这种方法就是用center盒子包裹左右两边，然后子绝父相，扔到左边和右边

定位时：把盒子定位到左（右）上角再减去自身的宽度

切记left（right）：-300px; 给的是负数

大盒子也一样要给边距哦！

不然左右就被推到页面外边了！就要找呀找不到了~~~你还再寻找什么~~~~这停，我们继续

切记要子绝父相哦！

要不然子盒子会乱找爹，跑到意想不到的地方（确实要注意，不要忘记了）

总体来说，第二种和第三种都没有第一种用的方便

说一下吧！这些个人常用的几种方法，要是有别的方法，欢迎各位老师指点！

求打赏！！！！！！！！！让我吃馒头能加辣条

LZC_yEllOwBooK

关注

3
点赞
踩
1

收藏

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

1.利用flex布局 <style> .father{ height: 100px; display: flex; /* 因为div独占整行，所以不需要设置宽度 */ } .left,.right{ width: 100px; background-color: red; /* 没有flex为1这个属
复制链接

扫一扫

专栏目录