其他分享
首页 > 其他分享> > html怎么进行圣杯布局

html怎么进行圣杯布局

作者：互联网

例子

1、利用定位实现两侧固定中间自适应

1.1）父盒子设置左右 padding 值

1.2）给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.

1.3）中间盒子自适应

其原理是使用padding预留位置，让后使用absolate布局，将左右盒子使用left和right定位到左右面。子盒子的width与父盒子相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            height: 400px;
            background-color: pink;
            position: relative;
            padding: 0 200px;
        }
        .left,.right {
            width: 200px;
            height: 300px;
            background-color: yellow;
            position: absolute;
            top: 0;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }
        .center {
            background-color: blue;
            height: 350px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

2. 利用百分比和relative布局 float

2.1 左盒子 右盒子 中间盒子的布局都设为 relative相对布局

2.2 所有盒子的宽度都设为百分比

2.3 所有盒子都float:left

原理使用float：可以自动飘向一边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            height: 400px;
            background-color: pink;
        }
        .left,.right {
            width: 20%;
            height: 300px;
            background-color: yellow;
            position: relative;
        }
        .left {
            float: left;
            display: inline-block;
        }
        .right {
            display: inline-block;
            float: left;
        }
        .center {
            background-color: blue;
            float: left;
            width: 60%;
            height: 350px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

3. 利用flex进行布局

3.1 将父元素设为flex 布局

3.2 设定左右盒子元素的宽度

3.3 中间盒子 flex:1

原理：flex布局的子元素不会自动换行,和使用flex:1 来占用父元素剩余空间。

flex:1

flex-basis

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

flex-grow

用来“瓜分”父项的“剩余空间”。（当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何索取分配父元素的剩余空间。值越大，索取的越厉害。）

flex-shrink

用来“吸收”超出的空间（父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。值越大，减小的越厉害。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            height: 400px;
            background-color: pink;
            display: flex;
        }
        .left,.right {
            width: 20%;
            height: 300px;
            background-color: yellow;
        }
        .center {
            background-color: blue;
            height: 350px;
            flex: 1;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>
</html>

标签：flex,元素,圣杯,color,布局,html,background,盒子,left
来源： https://www.cnblogs.com/jefferyeven/p/15916614.html