「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」
前端的样式实现无外乎两种，一种通过 JavaScript 进行控制，另一种就是通过 css 直接进行设置。在 css 中使用最多的就要属布局方式了。
目前很多的项目开发中都直接引入了 ui 组件库，很多样式都不需要小伙伴自己进行编写了，简化了很多的工作量，也很多新入行的小伙伴能够更快地上手项目，降低了学习的成本。
但是这也无形中给我们的工作中埋下了一颗随时可能摧毁整个项目的炸弹 💣💣💣💣💣💣 （无关逻辑，无关 JavaScript 技术）！！！！！！
基础的 css 大家都会了，这里就不再多说了，今天我们的主题就是 css 布局。
想必很多小伙伴在工作中都会有这样的疑问，为什么看着别人的项目的布局都是看着那么舒服，元素 想 放哪里就 能 够放到哪里呢。。。
虽然前端有的小团队没有 UI，自己想怎么开发都可以，但是很多时候在设计感上还是要依赖 UI 的创新，这就不可避免的要高度还原效果图。然而很多时候做出的页面却与效果图想要表达的有很大的偏差。。。这个时候 css 的各种布局就需要派上用场了。。。
css 布局成员：【 正常布局流、弹性盒子、网格、浮动、定位、表格布局、多列布局 】
日常开发中使用频次比较高的：正常布局流、弹性盒子、定位（其他的几个用的不多，这三个足以代替其他几个的实现）
在 display 中比较受欢迎的就属 【 block（占整行）、inline（无法控制宽高）、inline-block（多个既可以在一行中排列，宽高也是可控的）、none（隐藏不占空间）、flex（弹性布局）、grid（网格布局）】
在 position 中呼声最高的要属 【 fixed（基于浏览器可视窗口进行定位）、relative（相对定位）、absolute（绝对定位，可以通过设置 relative 确定定位参考位置）、sticky（粘性布局，用过的都说太稀罕它啦）】
弹性盒子（display: flex）用的频率也是很高的，很多追求技术的小伙伴也是它的忠实粉丝，是响应式布局的好帮手，是手机端的首选布局方式
网格布局（display: grid）在最近几年使用的人也是在逐渐增多，它可以在行列两个维度上进行布局控制
表格和多列布局这里就不多说了，浮动布局（float）之前鉴于有些浏览器的兼容性问题，已经被我弃用很多年了，在工作中我都是使用的【 相对定位 + 绝对定位 】来代替的。
以上只是基于我这么多年使用对 css 布局的一点点感受，如有对 css 布局方式有不同想法对小伙伴，欢迎评论区留言探讨 😄
