css布局方案汇总(28个实例图文并茂)
ccwgpt 2025-04-23 22:38 94 浏览 0 评论
简介
布局在我们前端日常开发来说是非常重要的,一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(flex)布局、网格(grid)布局。关于布局方法本文不做详细讲解,笔者推荐看阮一峰老师 flex布局教程 和阮一峰老师 grid布局教程。
本文主要讲解水平垂直居中、单栏布局、双栏布局、三栏布局一些项目中常用的布局方案。
本文代码全部使用codepen在线代码工具进行演示。
居中
居中在我们日常工作中还是会经常碰到。
水平居中
对于水平居中一般可以使用如下四种方式
- 对于行内元素我们可以在父元素上设置text-align:center;来实现。
- 对于定长块级元素我们可以使用margin: 0 auto;来实现。
- 我们可以在父元素上使用flex布局来实现。
- 我们可以在父元素上使用grid布局来实现。
<div class="div1">
<span>行内元素水平居中</span>
</div>
<div class="div2">
<span>行内元素水平居中</span>
<div>块级元素水平居中</div>
</div>
<div class="div3">
<span>行内元素水平居中</span>
<div>块级元素水平居中</div>
</div>
<div class="div4">块级元素水平居中</div>
.div1 {
text-align: center;
}
.div2 {
display: flex;
justify-content: center;
}
.div3 {
display: grid;
justify-content: center;
}
.div4 {
width: 130px;
margin: 0 auto;
}
效果如下
点击查看代码运行实例
垂直居中
对于垂直居中一般可以使用如下三种方式
- 我们可以在父元素上设置line-height等于height来实现。
- 我们可以在父元素上使用flex布局来实现。
- 我们可以在父元素上使用grid布局来实现。
- 我们可以在父元素上使用table布局来实现。
<div class="div1">
<span>行内元素垂直居中</span>
<!-- <div>块级元素垂直居中</div> -->
</div>
<div class="div2">
<span>行内元素垂直居中</span>
<div>块级元素垂直居中</div>
</div>
<div class="div3">
<span>行内元素垂直居中</span>
<div>块级元素垂直居中</div>
</div>
<div class="div4">
<span>行内元素垂直居中</span>
<div>块级元素垂直居中</div>
</div>
.div1 {
height: 100px;
background: lightgreen;
line-height: 100px;
}
.div2 {
height: 100px;
background: lightblue;
display: flex;
align-items: center;
}
.div3 {
height: 100px;
background: lightgreen;
display: grid;
align-content: center;
}
.div4 {
height: 100px;
background: lightblue;
display: table-cell;
vertical-align: middle;
}
效果如下
点击查看代码运行实例
水平垂直同时居中
比如我们想实现如下水平垂直同时居中的效果
实现水平垂直同时居中我们可以使用绝对定位、table布局、flex布局 或 grid布局来实现。
首先我们创建一个需要居中的盒子。
<div class="box"></div>
纯绝对定位
.box {
position: absolute;
width: 200px;
height: 100px;
background: red;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
点击查看代码运行实例
绝对定位加负外边距
这种方式需要知道居中元素的具体宽高,不然负的margin没法设置。
.box {
position: absolute;
width: 200px;
height: 100px;
background: red;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}
点击查看代码运行实例
绝对定位加平移
这种平移的方式就不需要考虑居中盒子的具体宽高了。
.box {
position: absolute;
width: 200px;
height: 100px;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
点击查看代码运行实例
使用flex实现
html,body {
height: 100%;
}
body {
background: gray;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 200px;
height: 100px;
background: red;
}
点击查看代码运行实例
使用grid实现
html,body {
height: 100%;
}
body {
background: gray;
display: grid;
/* align-content: center;
justify-content: center; */
/* align-content和justify-content的简写 */
place-content: center;
}
.box {
width: 200px;
height: 100px;
background: red;
}
点击查看代码运行实例
使用table加外边距实现
使用table布局需要注意如下
- display: table时padding会失效
- display: table-row时margin、padding同时失效
- display: table-cell时margin会失效
<div class="box">
<div class="child"></div>
</div>
.box {
background: red;
height: 300px;
width: 600px;
display: table-cell;
vertical-align: middle;
}
.child {
width: 200px;
height: 200px;
background: lightgreen;
margin: 0 auto;
}
点击查看代码运行实例
单栏布局
单栏布局我们常用在网页框架上,一般我们把网页分为 header、content、footer三部分。
在不同的项目我们可能对这三部分的样式需求有所差别,比如需要顶部固定、需要底部固定等等。
顶底部都不固定
比如想实现如下效果,footer在内容不足的时候吸附在窗口底部,当内容多的时候又可以被抵到窗口下面。
使用padding加负margin实现
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
min-height: 100%;
padding-bottom: 50px;
overflow: auto;
box-sizing: border-box;
}
.header {
height: 50px;
background: lightblue;
}
.content {
background: lightpink;
/* 这里的高度只是为了模拟内容多少 */
height: 100px;
/* height: 1000px; */
}
.footer {
height: 50px;
background: lightgreen;
margin-top: -50px;
}
点击查看代码运行实例
使用flex实现
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
flex-direction: column;
min-height: 100%;
}
.header {
height: 50px;
background: lightblue;
}
.content {
background: lightpink;
/* 这里的高度只是为了模拟内容多少 */
height: 100px;
/* height: 1000px; */
flex-grow: 1;
}
.footer {
height: 50px;
background: lightgreen;
}
点击查看代码运行实例
顶部固定
使用padding加负margin加fixed实现顶部固定布局
<div class="header">header</div>
<div class="wrap">
<div class="content">content</div>
</div>
<div class="footer">footer</div>
html, body {
height: 100%;
margin: 0;
}
.header {
height: 50px;
background: lightblue;
position: fixed;
width: 100%;
}
.wrap {
min-height: 100%;
padding-bottom: 50px;
overflow: auto;
box-sizing: border-box;
}
.content {
margin-top: 50px;
background: lightpink;
/* 这里的高度只是为了模拟内容多少 */
height: 100px;
/* height: 1000px; */
}
.footer {
height: 50px;
background: lightgreen;
margin-top: -50px;
}
点击查看代码运行实例
使用flex加fixed定位实现
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction:column;
}
.header {
height: 50px;
background: lightblue;
position: fixed;
width: 100%;
}
.content {
background: lightpink;
/* 这里的高度只是为了模拟内容多少 */
/* height: 100px; */
height: 1000px;
margin-top: 50px;
flex-grow: 1;
}
.footer {
height: 50px;
background: lightgreen;
}
点击查看代码运行实例
底部固定
使用padding加负margin实现底部固定布局
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="footer">footer</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
height: 100%;
padding-bottom: 50px;
overflow: auto;
box-sizing: border-box;
}
.header {
height: 50px;
background: lightblue;
}
.content {
background: lightpink;
height: 100px;
height: 1000px;
}
.footer {
height: 50px;
background: lightgreen;
margin-top: -50px;
}
点击查看代码运行实例
使用flex加fixed定位实现
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction:column;
}
.header {
height: 50px;
background: lightblue;
}
.content {
background: lightpink;
/* 这里的高度只是为了模拟内容多少 */
/* height: 100px; */
height: 1000px;
flex-grow: 1;
margin-bottom: 50px;
}
.footer {
height: 50px;
background: lightgreen;
position: fixed;
width: 100%;
bottom: 0;
}
点击查看代码运行实例
顶底部都固定
使用fixed实现顶底部固定布局
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
复制代码
html, body {
height: 100%;
margin: 0;
}
.header {
height: 50px;
background: lightblue;
position: fixed;
width: 100%;
}
.content {
background: lightpink;
padding-top: 50px;
padding-bottom: 50px;
/* height: 100px; */
height: 1000px;
}
.footer {
height: 50px;
background: lightgreen;
position: fixed;
bottom: 0;
width: 100%;
}
点击查看代码运行实例
使用flex加fixed定位实现
<div class="wrap">
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
html, body {
height: 100%;
margin: 0;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction:column;
}
.header {
height: 50px;
background: lightblue;
position: fixed;
width: 100%;
}
.content {
background: lightpink;
/* 这里的高度只是为了模拟内容多少 */
/* height: 100px; */
height: 1000px;
flex-grow: 1;
margin-bottom: 50px;
margin-top: 50px;
}
.footer {
height: 50px;
background: lightgreen;
position: fixed;
width: 100%;
bottom: 0;
}
点击查看代码运行实例
两栏布局
两栏布局就是一边固定,另外一边自适应,效果如下
实现两栏布局的方法也有很多,笔者接下来介绍用的比较多的几种方式。
左 float,然后右 margin-left(右边自适应)
<div class="aside"></div>
<div class="main"></div>
div {
height: 500px;
}
.aside {
width: 300px;
float: left;
background: yellow;
}
.main {
background: aqua;
margin-left: 300px;
}
点击查看代码运行实例
右 float,然后右 margin-right(左边自适应)
<div class="aside"></div>
<div class="main"></div>
div {
height: 500px;
}
.aside {
width: 300px;
float: right;
background: yellow;
}
.main {
background: aqua;
margin-right: 300px;
}
点击查看代码运行实例
absolute定位加margin-left(右边自适应)
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
div {
height: 500px;
}
.wrap {
position: relative;
}
.aside {
width: 300px;
background: yellow;
position: absolute;
}
.main {
background: aqua;
margin-left: 300px;
}
点击查看代码运行实例
absolute定位加margin-right(左边自适应)
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
div {
height: 500px;
}
.wrap {
position: relative;
}
.aside {
width: 300px;
background: yellow;
position: absolute;
right: 0;
}
.main {
background: aqua;
margin-right: 300px;
}
点击查看代码运行实例
使用flex实现
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
div {
height: 500px;
}
.wrap {
display: flex;
}
.aside {
flex: 0 0 300px;
background: yellow;
}
.main {
background: aqua;
flex: 1 1;
}
点击查看代码运行实例
使用grid实现
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
height: 500px;
}
.wrap {
display: grid;
grid-template-columns: 300px auto;
}
.aside {
background: yellow;
}
.main {
background: aqua;
}
点击查看代码运行实例
三栏布局
三栏布局就是两边固定,中间自适应布局,效果如下
实现三栏布局的方法也有很多,笔者接下来介绍用的比较多的几种方式。
position + margin-left + margin-right实现三栏布局
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
html,
body {
margin: 0;
}
div {
height: 500px;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
background: green;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
background: red;
}
.middle {
margin-left: 200px;
margin-right: 200px;
background: lightpink;
}
点击查看代码运行实例
float + margin-left + margin-right实现三栏布局
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
html,
body {
margin: 0;
}
div {
height: 500px;
}
.left {
width: 200px;
background: green;
float: left;
}
.right {
width: 200px;
background: yellow;
float: right;
}
.middle {
margin-left: 200px;
margin-right: 200px;
background: lightpink;
}
点击查看代码运行实例
flex实现三栏布局
<div class="wrap">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
html,
body {
margin: 0;
}
div {
height: 500px;
}
.wrap {
display: flex;
}
.left {
flex: 0 0 200px;
background: green;
}
.right {
flex: 0 0 200px;
background: yellow;
}
.middle {
background: lightpink;
flex: 1 1;
}
点击查看代码运行实例
grid实现三栏布局
<div class="wrap">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
html,
body {
margin: 0;
}
div {
height: 500px;
}
.wrap {
display: grid;
grid-template-columns: 200px auto 200px;
}
.left {
background: green;
}
.right {
background: yellow;
}
.middle {
background: lightpink;
}
点击查看代码运行实例
圣杯布局
圣杯布局在项目中基本上不会再使用了,在面试中我们会经常碰到,所以需要了解。
主要用到了浮动和和相对定位。
<div class="container">
<div class="content">中间内容</div>
<div class="left">左侧区域</div>
<div class="right">右侧区域</div>
</div>
div {
height: 500px;
}
.container {
padding: 0 200px 0 200px;
border: 1px solid black;
}
.content {
float: left;
width: 100%;
background: #f00;
}
.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
background: #00f;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
点击查看代码运行实例
双飞翼布局
双飞翼布局在项目中基本上不会再使用了,在面试中我们会经常碰到,所以需要了解。
主要用到了浮动。
<div class="main">
<div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
div {
height: 500px;
}
.main {
float: left;
width: 100%;
background: #f00;
}
.main .content {
/* margin、padding这两种方式都可以 */
/* margin-left: 200px;
margin-right: 300px; */
padding-left: 200px;
padding-right: 300px;
}
.left {
width: 200px;
background: #0f0;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
background: #00f;
float: left;
margin-left: -200px;
}
点击查看代码运行实例
总结
因为flex和grid布局方法已经很强大了,日常工作中99%的布局都可以使用这两种方式来实现。所以笔者建议能使用flex或者grid布局方法实现的就尽量使用这两种布局方式实现。因为不仅简单而且负面作用也很少。
浮动布局和绝对定位布局会导致元素脱离文档流,会带来一些负面作用,有时会导致一些意想不到的结果。
关于flex布局的兼容性和grid布局的兼容性,目前已经支持的很好了,大家可以放心使用。
flex布局的兼容性
grid布局的兼容性
后记
感谢小伙伴们的耐心观看,本文为笔者个人学习笔记,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!
- 上一篇:十款免费的CSS框架加速Web开发
- 下一篇:编程自学之前端框架篇之Vue.js
相关推荐
- 如何使用PIL生成验证码?(pi验证教程)
-
web项目中遇到使用验证码的情况有很多,进行介绍下使用PIL生成验证码的方法。安装开始安装PIL的过程确实麻烦各种问题层出不绝,不过不断深入后就没有这方面的困扰了:windows安装:直接安装Pil...
- Python必学!3步解锁asyncio异步编程 性能直接狂飙10倍!
-
还在用传统同步代码被IO阻塞卡到崩溃?别当“代码苦行僧”了!Python的asyncio模块堪称异步编程的“开挂神器”,处理高并发任务就像开了涡轮增压!不管是网络爬虫、API接口开发还是文件批量处理,...
- Tornado6+APScheduler/Celery打造并发异步动态定时任务轮询服务
-
定时任务的典型落地场景在各行业中都很普遍,比如支付系统中,支付过程中因为网络或者其他因素导致出现掉单、卡单的情况,账单变成了“单边账”,这种情况对于支付用户来说,毫无疑问是灾难级别的体验,明明自己付了...
- Python学习怎么入门?附真实学习方法
-
Python技术在企业中应用的越来越广泛,因此企业对于Python方面专业人才的需求也越来越大,那对于之前对Python没有任何了解和接触的人而言,想要从零开始学习并不是一件容易的事情,接下来小U就为...
- PySpider框架的使用(pyspider 教程)
-
PysiderPysider是一个国人用Python编写的、带有强大的WebUI的网络爬虫系统,它支持多种数据库、任务监控、项目管理、结果查看、URL去重等强大的功能。安装pip3inst...
- 大学计算机专业 学习Python学习路线图(最新版)
-
这是我刚开始学习python时的一套学习路线,从入门到上手。(不敢说精通,哈哈~)希望对大家有帮助哈~大家需要高清得完整python学习路线可以【文末有获取方式】【文末有获取方式】一、Python入门...
- 阿里巴巴打造的400集Python视频合集免费学起来,学完万物皆可爬
-
第一阶段Python入门章节1:Python入门章节2:编程基本概念章节3:序列章节4:控制语句章节5:函数章节6:面向对象编程第二阶段Python深入与提高章节1:异常处理章节2:游戏开发-坦克大...
- Nginx Gunicorn在服务器中分别起什么作用
-
大部分人在gunicorn前面部署一层nginx的时候也的确没有想过为什么,他们只是觉得这样显得他们比较专业,而且幻想着加了一层nginx反向代理之后性能会有提升,恕我直言,请你们带上脑子,一个单纯的...
- Python培训怎么学?Python基础技术总结!值得一看
-
Python培训如今越来越被更多人所接受,相比自学参加Python培训的好处也是显而易见,但Python毕竟属于后端编程开发的主流语言,其知识机构还是比较庞大的,那Python培训怎么学?以及Pyth...
- 使用Tornado部署Flask项目(tornado async)
-
Tornado不仅仅是一个WEB框架,也可以是一个WEB服务器。在Tornado中我们可以使用wsgi模块下的WSGIContainer类运行其他WSGI应用如:Fask,Bottle,Djang...
- Python Web框架哪个好用?(python3 web框架)
-
问:PythonWeb框架哪个好用? 答: 1.Django Django是Python世界中最出名、最成熟的Web框架。Django功能全面,各模块之间结合紧密,(不讲其他的)Djang...
- Vue3.0+Tornado6.1发布订阅模式打造异步非阻塞实时=通信聊天系统
-
“表达欲”是人类成长史上的强大“源动力”,恩格斯早就直截了当地指出,处在蒙昧时代即低级阶段的人类,“以果实、坚果、根作为食物;音节清晰的语言的产生是这一时期的主要成就”。而在网络时代人们的表达欲往往更...
- Python开源项目合集(第三方平台)(python第三方开发工具)
-
wechat-python-sdk-wechat-python-sdk微信公众平台Python开发包http://wechat-python-sdk.readthedocs.org/,非官方...
- IT界10倍高效学习法!用这种方式,一年学完清华大学四年的课程
-
有没有在某一个瞬间,让你放弃学编程刚开始学python时,我找了几十本国内外的python编程书籍学习后,我还是似懂非懂,那些书里面到处都是抽象的概念,复杂的逻辑,这样的书,对于专业开发者来说,在平常...
- 如何将Python算法模型注册成Spark UDF函数实现全景模型部署
-
背景Background对于算法业务团队来说,将训练好的模型部署成服务的业务场景是非常常见的。通常会应用于三个场景:部署到流式程序里,比如风控需要通过流式处理来实时监控。部署到批任务中部署成API服...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- 如何使用PIL生成验证码?(pi验证教程)
- Python必学!3步解锁asyncio异步编程 性能直接狂飙10倍!
- Tornado6+APScheduler/Celery打造并发异步动态定时任务轮询服务
- Python学习怎么入门?附真实学习方法
- PySpider框架的使用(pyspider 教程)
- 大学计算机专业 学习Python学习路线图(最新版)
- 阿里巴巴打造的400集Python视频合集免费学起来,学完万物皆可爬
- Nginx Gunicorn在服务器中分别起什么作用
- Python培训怎么学?Python基础技术总结!值得一看
- 使用Tornado部署Flask项目(tornado async)
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)