三栏布局 Cheat Sheet

原文首发于 baishusama.github.io，欢迎围观～

整理了下常见三栏布局的做法。

布局索引

  1. 流式布局
  2. BFC 布局
  3. 绝对定位布局
  4. 圣杯布局
  5. 双飞翼布局
  6. Flex 布局

P.S. 各个布局的原理在本篇没有解释，对于圣杯布局和双飞翼布局感兴趣的童鞋可以看看参考中的后两篇文章。

优缺点

前两种布局的缺点是主要内容无法优先加载。当页面加载慢时会影响用户体验。

后四种布局调整了 HTML 代码顺序，克服了上述缺点。

与圣杯布局相比，双飞翼布局以更复杂的 HTML （主要内容外再包裹一层）为代价简化了 CSS 样式（左侧边栏少用一个相对定位）。

参考

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容