这8张脑图几乎概括了所有的布局方案,确定不吗
Hi~,我是一碗周,如果写的文章有幸可以得到你的青睐,万分有幸~
🍏 写在前面
前端布局不管是在面试过程中还是在工作中都是非常重要的一部分,一个优秀的前端工程师可以在很快的时间内写出同一种布局的多种实现方案,练习并掌握CSS布局方案可以提高我们的页面开发速度。
这篇文章通过思维导图的方式总结了八大类前端布局,每一类最少都包含3个实现方法,由于是脑图,并不能展示过多的代码且没有代码高亮(这点很不友好),不过我尽可能多的在脑图中展示了核心CSS代码,方便参考。
八大类布局如下图:
文本包含的图片数据大于10M,流量用户请选择性阅读
🍑 水平居中
水平居中的实现非常简单,也是最常用的,这里列举了7方式如下图:
🍒 垂直居中
垂直居中的使用率几乎与水平居中差不多,实现也是非常的简单,这里总结了6种常用方式
🍓 水平垂直居中
实现水平垂直居中,只需要将前面的方式进行结合,这里总结了7种方式。
🫐 两列布局
所谓的两列布局就是一列定宽(也有可能由子元素决定宽度),一列自适应的布局。最终效果如下所示:
这里总结了实现两列布局的6种方式
🍈 三列布局
三列布局主要分为两种:
- 第一种是前两列定宽,最后一列自适应,这一种本质上与两列布局没有什么区别,可以参照两列布局实现。
- 第二种是前后两列定宽,中间自适应,最终效果图如下
这里总结了实现两列布局的5种方式
🍊 等分布局
等分布局就是将一个容器平均分成几等份,这里以 4 等分为例,总结了4种实现方式。
🍉 Sticky Footer布局
Sticky Footer布局是页面内容不够长时,底部栏就会固定到浏览器的底部;如果足够长时,底部栏就后跟随在内容的后面。如下图所示:
这里总结了4种实现方式
🍋 全屏布局
全部布局主要应用在后台,主要效果如下所示:
这里总结了3种实现方式
🥭 写在最后
可以将文中的图片直接保存到本地使用,如果你需要原图片或者思维导图源文件可以找我要。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfbibgg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13