大家好，我是正在努力学前端的小白。
最近我在学习网页布局，看到了一张非常经典的“红绿蓝”三色图。别看这图简单，它其实是无数网页的“骨架”——导航栏、左侧栏、中间内容区、右侧栏、页脚。
学会了怎么把这些“积木”横着排，你就掌握了网页布局的核心技能。
今天，我把自己的学习笔记整理成这篇博客，用三种不同的方法（`inline-block`、`position`、`flex`）来实现同样的效果，并且告诉你——哪种写法最推荐，哪种已经过时了。
一、方法一：用 inline-block —— 最原始的“横排魔法”
我们先从最基础的方法开始：把块级元素变成行内块元素。
在HTML里，div 默认是“块级”的，意思是它们会一个接一个往下堆。要让它们并排，我们可以给每个 div 加上 display: inline-block;。
核心代码思路
.left, .middle, .right {
display: inline-block; /* 横向并排 */
}
然后给它们分配宽度：左边 10%，中间 80%，右边 10%。
⚠️ 一个大坑：幽灵空白间隙
当你满心欢喜地把三列宽度设为 10% + 80% + 10% = 100% 时，你会惊奇地发现——第三列被挤到下一行了！
为什么？因为行内块元素之间的HTML代码里的换行和空格，会被浏览器当成一个“空白字符”渲染出来。这个空白虽然看不见，但它会占用宽度。
解决方案： 把中间的宽度从 80% 改小一点点，比如 79.5%，给幽灵空白腾出空间。
.middle {
width: 79.5%; /* 给空白留点位置 */
}
小结
| 优点 | 缺点 |
| 简单，容易理解 | 需要手动处理空白间隙 |
| 适合静态页面 | 盒模型计算容易出问题 |
二、方法二：用 position —— 像贴标签一样精准定位
第二种方法是使用 定位（position）。它的思路很直接：给父容器定一个坐标系，然后把子元素精确地“粘”在指定的位置。
核心代码思路
/* 父容器：建立参考坐标系 */
.container {
position: relative;
}
/* 左侧栏：贴在左边 */
.left {
position: absolute;
left: 0;
top: 0;
}
/* 中间栏：贴在左侧栏右边 */
.middle {
position: absolute;
left: 10%; /* 跳过左侧栏的10%宽度 */
top: 0;
}
/* 右侧栏：贴在右边 */
.right {
position: absolute;
right: 0;
top: 0;
}
🎯 优缺点
这种方法就像在墙上贴画，想贴哪儿就贴哪儿，定位非常精准。
但是，它也有一个致命问题：不够灵活。如果你想把左侧栏从 10% 改成 20%，中间栏的 left 也要手动改成 20%。改一个地方，其他所有位置都得跟着调，很麻烦。
小结
| 优点 |
缺点 |
| 定位精准，不受文档流影响 | 需要手动计算位置，维护困难 |
| 适合做悬浮或固定元素 | 内容多了容易重叠 |
三、方法三：用 flex —— 现代布局的“神器”
终于到了Flexbox（弹性盒子）。这是目前最推荐、最优雅的布局方式。
核心代码思路
/* 父容器：开启弹性盒子 */
.container {
display: flex;
}
/* 三列分别设置宽度 */
.left { width: 10%; }
.middle { width: 80%; }
.right { width: 10%; }
就这么简单！不需要处理幽灵空白，不需要手动计算位置。Flexbox 会自动搞定一切，而且三列会自动填满空间，不会多出来也不会少。
🌟 更高级的玩法：让中间的内容自动换行
在 Flexbox 中，你还可以让中间列内部的元素自动换行排列。比如，中间区域有很多小方块，你可以这样做：
.middle {
display: flex;
flex-wrap: wrap; /* 允许子元素自动换行 */
align-content: flex-start; /* 从起点开始排列 */
}
这样，中间区域就像一个大盒子，里面的小方块一行放不下就会自动换到下一行，完全不用你操心。
小结
| 优点 | 缺点 |
| 没有空白间隙问题 | 需要浏览器支持（现代浏览器全支持） |
| 高度灵活，容易调整 | / |
| 响应式布局的基石 | / |
四、终极进化：Flexbox + 响应式布局
有了 Flexbox，我们就能轻松实现 响应式布局——即网页在不同屏幕尺寸（电脑、平板、手机）下自动调整样式。
核心思路
1. 开启弹性盒子，并允许自动换行：flex-wrap: wrap。
2. 用媒体查询（@media）针对不同屏幕宽度，重新设置每一列的宽度。
代码示例
.container {
display: flex;
flex-wrap: wrap; /* 关键：空间不够就自动换行 */
}
/* 默认：电脑端三列并排 */
.left { width: 10%; }
.middle { width: 80%; }
.right { width: 10%; }
/* 平板端：宽度 ≤ 768px */
@media (max-width: 768px) {
.left { width: 50%; } /* 左侧占一半 */
.middle { width: 100%; } /* 中间占满一整行，换到下一行 */
.right { width: 50%; } /* 右侧占一半，跟在左侧后面 */
}
/* 手机端：宽度 ≤ 480px */
@media (max-width: 480px) {
.left, .middle, .right {
width: 100%; /* 全部单列显示，从上到下 */
}
}
🌈 效果展示
·电脑上：三列并排（左10%、中80%、右10%）。
·平板上：左侧（50%）、中间（100% 换行到下一行）、右侧（50% 跟左侧在同一行）。
·手机上：三列全部占满一行，从上到下依次排列。
一套代码，三端适配！ 这就是现代前端开发的魅力。
五、总结：三种方法怎么选？
| 方法 | 优点 | 缺点 | 推荐场景 |
| inline-block | 简单易懂 | 空白间隙问题 | 初学者练习，静态页面 |
| position | 定位精准 | 维护困难，不灵活 | 悬浮元素、固定元素 |
| flex | 优雅、灵活、响应式 | 无 | 95%的场景首选 |
六、写在最后
通过这次学习，我最大的感受是：技术会更新，但解决问题的思路是相通的。
从 inline-block到 position 再到 flex，每种方法都有它的时代背景。而今天，Flexbox + 响应式布局 就是我们最好的工具。
如果你刚入门，直接学 Flexbox 吧！它能让你少走很多弯路，而且未来几年它依然是主流。
如果你觉得这篇文章对你有帮助，欢迎点赞、收藏、转发！也可以在评论区留言交流~
