常见 css 布局整理(1)

2401_84412357

于 2024-05-02 20:51:50 发布

阅读量9

点赞数 3

分类专栏：程序员文章标签： css 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/2401_84412357/article/details/138399737

版权

程序员专栏收录该内容

203 篇文章 0 订阅

订阅专栏

一、垂直居中

有父容器和子容器，实现子容器在父容器中的居中效果

布局效果：

在这里插入图片描述

二、等分布局

实现一行元素，在等高，等宽的情况下，在游览器汇总均匀排布

布局效果

在这里插入图片描述

三、等高布局

两列在同一级的 div 元素，实现等高等宽效果

布局效果

在这里插入图片描述

四、多列布局

多列布局实现（等宽，非等宽，有间隙）

布局效果

在这里插入图片描述

自适应的效果不方便展示，可以在代码中查看

五、局中布局（垂直居中）

两个 div 元素，小盒子在大盒子上下，左右都在中间

在这里插入图片描述

六、全屏布局

常见的 header，body， foot 的主流界面布局效果

在这里插入图片描述

七、三列布局

三列元素分摊 width

在这里插入图片描述

八、圣杯布局

头 + 尾布局

布局效果

在这里插入图片描述

九、双飞翼布局

left + item + right （left = right）

布局效果

在这里插入图片描述

十、水平居中

元素在水平内部居中效果实现

布局效果

在这里插入图片描述

十一、css 布局特别整理

11.1 快速制作一行底部导航栏

html

首页 <1 2 3 …>末页

#### 总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

28天读完349页，这份阿里面试通关手册，助我闯进字节跳动

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
常见 css 布局整理(1)

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。常见的 header，body， foot 的主流界面布局效果。实现一行元素，在等高，等宽的情况下，在游览器汇总均匀排布。多列布局实现（等宽，非等宽，有间隙）
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。