CSS常见布局整理

最新推荐文章于 2025-05-03 12:33:56 发布

原创最新推荐文章于 2025-05-03 12:33:56 发布

· 2.9k 阅读

11 ·

版权

文章标签：

#css #html #css3

本文详细介绍了CSS布局的各种方法，包括单列上下固定、两列左右固定、粘连布局和多列等高布局。通过绝对定位、float、flex和grid等技术实现各种复杂布局，并探讨了不同方法的优缺点和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、单列布局 – 上下固定，中间自适应效果图：

<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>

二、两列布局 – 左边固定，右边自适应效果图：

<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;

}


##### 三、三栏布局 -- 左右固定，中间自适应效果图：

<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e2dc1af7e21342c696329d8094d4d8d7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?" style="margin: auto" />

Left

Main

Right

```

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的高度足够长的时候，紧跟在后面的元素; 当元素比较短的时候（比如小于屏幕的高度），我们期望这个元素能够“粘连”在屏幕的底部

效果图：

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%，那么呈现的每一列则不是等高的，样式不美观

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>

实现后的效果：

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>