likes
comments
collection
share

CSS常见布局整理

作者站长头像
站长
· 阅读数 84

以下几种是常见的布局方式，这里放上 github 地址：github.com/XL1203/Layo…

一、单列布局 -- 上下固定，中间自适应

效果图：

CSS常见布局整理

<div class="container">
    <div class="top">Top</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
</div>
1、 使用绝对定位实现
<style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .container  {
        position: relative;
        width: 500px;
        height: 100%;
        margin: 0 auto;
    }

    .top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100px;
        background-color: red;
    }

    .main {
        position: absolute;
        top: 100px;
        bottom: 50px;
        width: 100%;
        background-color: green;
    }

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        background-color: blue;
    }

</style>
2、 使用 flex 实现
<style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .container  {
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 100%;
        margin: 0 auto;
    }

    .top,
    .footer {
        flex-grow: 0;
        flex-shrink: 0;
    }

    .top {
        width: 100%;
        flex-basis: 100px;
        background-color: red;
    }

    .main {
        flex: 1;
        width: 100%;
        background-color: green;
    }

    .footer {
        width: 100%;
        flex-basis: 50px;
        background-color: blue;
    }
</style>
二、两列布局 -- 左边固定，右边自适应

效果图：

CSS常见布局整理

<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
1、 使用绝对定位实现
(1) 左边元素设置为绝对定位，右边使用margin-left

.container {
    position: relative;
    width: 1000px;
    height: 100%;
}

.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: red;
}

.right {
    margin-left: 200px;
    height: 100%;
    background-color: green;

}

(2) 右边元素设置为绝对定位，将left设置为左侧元素的宽度，其余方向设置为0

.container {
    position: relative;
    width: 1000px;
    height: 100%;
}

.left {
    width: 200px;
    height: 100%;
    background-color: red;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 200px;
    background-color: green;

}
2、 使用 float 实现
.container {
    width: 1000px;
    height: 100%;
}

.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: red;
}

.right {
    margin-left: 200px;
    height: 100%;
    background-color: green;
}
3、 使用 flex 实现
.container {
    display: flex;
    width: 1000px;
    height: 100%;
}

.left {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 200px;
    background-color: red;
}

.right {
    flex: auto;
    background-color: green;

}
4. 使用 grid 实现
.container {
    display: grid;
    grid-template-columns: 200px auto;
    width: 1000px;
    height: 100%;
}

.left {

    background-color: red;
}

.right {
    background-color: green;

}
三、三栏布局 -- 左右固定，中间自适应

效果图：

CSS常见布局整理

<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>
1、 使用 float 实现 (利用浮动的方式，左右两栏设置固定大小，并设置对应方向的浮动。中间一栏设置左右两个方向的margin值，注意这种方式，中间一栏必须放到最后)
<div class="container">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="main">Main</div>
</div>

.container {
    width: 1000px;
    height: 100%;
}

.left {
    float: left;
    width: 200px;
    height: 100%;
    background-color: red;
}

.right {
    float: right;
    width: 100px;
    height: 100%;
    background-color: blue;
}

.main {
    margin-left: 200px;
    margin-right: 100px;
    height: 100%;
    background-color: green;
}
2、 使用绝对定位实现 -- 左右元素使用绝对定位，中间元素使用对应的 margin 分隔
.container {
    position: relative;
    width: 1000px;
    height: 100%;
}

.left {
    position: absolute;
    width: 200px;
    height: 100%;
    background-color: red;
}

.main {
    margin: 0 100px 0 200px;
    height: 100%;
    background-color: green;
}

.right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background-color: blue;
}
3、使用flex实现 -- 左右元素放大缩小都设置为0，设置其基本大小，中间元素自动撑开
.container {
    display: flex;
    width: 1000px;
    height: 100%;
}

.left,
.right {
    flex-grow: 0;
    flex-shrink: 0;
}

.left {
    width: 200px;
    height: 100%;
    background-color: red;
}

.main {
    flex: 1;
    background-color: green;
}

.right {
    width: 100px;
    height: 100%;
    background-color: blue;
}
4、使用grid实现
.container {
    display: grid;
    grid-template-columns: 200px auto 100px;
    width: 1000px;
    height: 100%;
}

.left {
    height: 100%;
    background-color: red;
}

.main {
    background-color: green;
}

.right {
    height: 100%;
    background-color: blue;
}
5. 圣杯布局 -- 利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边
<div class="container">
    <div class="main">Main</div>
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>

.container {
    padding-left: 200px;
    padding-right: 100px;
    width: 1000px;
    height: 100%;
}

.main {
    float: left;
    width: 100%;
    height: 100%;
    background-color: green;
}

.left {
    float: left;
    margin-left: -100%;
    
    position: relative;
    left: -200px;
    
    width: 200px;
    height: 100%;
    background-color: red;
}

.right {
    position: relative;
    left: 100px;
    
    float: left;
    margin-left: -100px;
    
    width: 100px;
    height: 100%;
    background-color: blue;
}
6. 双飞翼布局 -- 相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的
<div class="main">
    <div class="center">Center</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>

.container {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}

.main {
    float: left;
    width: 100%;
    height: 100%;
    background-color: green;
}

.main  .center {
    margin-left: 200px;
    margin-right: 100px;
    background-color: pink;
}

.left {
    margin-left: -100%;
    float: left;
    width: 200px;
    height: 100%;
    background-color: red;
}

.right {
    margin-left: -100px;
    float: left;
    width: 100px;
    height: 100%;
    background-color: blue;
}
四、 粘连布局 -- 当main的高度足够长的时候，紧跟在后面的元素; 当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部

效果图： CSS常见布局整理

CSS常见布局整理

1. 使用 margin 负值
<body>
<div class="main">
    主内容区域<br/>
    主内容区域<br/>
    主内容区域<br/>
    主内容区域<br/>
    主内容区域<br/>
    主内容区域<br/>
    主内容区域<br/>
    主内容区域<br/>
</div>
<div class="footer">
    底部内容区域
</div>
</body>

<style>
    html,
    body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .main {
        min-height: calc(100% - 40px);
        padding-bottom: 40px;
    }

    .footer {
        margin-top: -40px;
        width: 100%;
        height: 40px;
        background-color: green;
    }
</style>
2. 使用 flex -- footer内容可能改变,固定高度不够完美。使用 flexbox 来实现粘连 footer 不仅不需要任何额外的元素，还可以支持 footer 可变高度
<style>
    html,
    body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .main {
       flex: 1;
    }

    .footer {
        flex-grow: 0;
        flex-shrink: 0;
        height: 40px;
        background-color: green;
    }
</style>
五、 多列等高布局

前面的三栏布局，我们不设置高度为100%，那么呈现的每一列则不是等高的，样式不美观 CSS常见布局整理

1. 使用 margin-bottom 负值与 padding-bottom 正值对冲实现(值要大)，负元素设置 overflow: hidden 形成BFC
<div class="container">
    <div class="left">Left</div>
    <div class="main">Main</div>
    <div class="right">Right</div>
</div>

<style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .container {
        position: relative;
        width: 1000px;
        height: 100%;
        overflow: hidden;
    }

    .left,
    .right,
    .main {
        padding-bottom: 99999px;
        margin-bottom: -99999px;
    }

    .left {
        width: 200px;
        background-color: red;
    }

    .main {
        position: absolute;
        top: 0;
        right: 100px;
        bottom: 0;
        left: 200px;
        background-color: green;
    }

    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        background-color: blue;
    }

</style>

实现后的效果：

CSS常见布局整理

2. 使用 flex, 项目的 align-self 默认使用stretch 撑满父级元素的高的
<style>
    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }

    .container {
        display: flex;
        width: 1000px;
        height: 100%;
    }

    .left {
        width: 200px;
        background-color: red;
    }

    .main {
        flex: 1;
        background-color: green;
    }

    .right {
        width: 100px;
        background-color: blue;
    }

</style>
转载自:https://juejin.cn/post/7173210437268275230
评论
请登录