Rowan Liu's Tech
Home
Blog
CSS
JS
lib
Read
About
GitHub
Home
Blog
CSS
JS
lib
Read
About
GitHub
  • CSS
  • rem
  • CSS 选择器
  • inline-block
  • BFC 块格式化上下文
  • 认识Flex
  • Grid
  • 常用的布局实现
  • 响应式Web设计

常用的布局实现

  • 左右布局
  • 上左右布局
  • 上左中右布局

流体布局(是不是也称为流式布局)

左右模块各自左右浮动,中间模块的margin值使中间模块宽度自适应。缺点是主要内容无法预先加载,当页面内容过多时影响用户体验。

BFC三栏布局

缺点是主要内容不能最先加载,当页面内容过多时影响用户体验。为了解决这个问题才用到双飞翼布局。

双飞翼布局

利用浮动元素margin负值的应用。主体内容可以先加载,HTML代码结构稍微复杂点。

圣杯布局

跟双飞翼布局很像,细节上有区别,HTML的结构相对简单,但是样式定义就稍微复杂,也是优先加载主体内容。

Flex布局

需要考虑兼容性。

Table布局

Table布局的缺点是无法设置栏间距。不能设置margin值,有padding值。

绝对定位布局

简单实用,主要内容可以先加载。

Bootstrap布局

上面的例子是简化了bootstrap4的 album这个demo的部分代码,其实要是熟悉bootstrap的语法,所有的样式都通过bootstrap来做,也会非常统一。

参考

  1. 详解CSS七种三栏布局技巧
Edit this page
Last Updated: 2026/1/12 10:15
Contributors: Rowan Liu
Prev
Grid
Next
响应式Web设计