文章目录

• CSS 常见布局
• • 单列布局
  • • 单列布局（不通栏）
    • 单列布局（通栏）
  • 双列布局
  • • float+overflow:hidden
    • flex
    • grid
  • 三列布局
  • • 三列布局（圣杯布局）
    • 三列布局（双飞翼布局）
  • 等高布局
  • • 等高布局（正padding+负margin）
    • 仿表格布局
  • 粘连布局
  • 代码下载

CSS 常见布局

单列布局

单列布局（不通栏）

实现方式：

• 通过对header、content、footer统一设置宽度。
• 再设置margin: 0 auto实现居中。

单列布局（通栏）

实现方式：

• header、footer宽度不设置，块元素会充满屏幕。
• content设置width，并通过margin: auto实现居中。

双列布局

双列布局，一列固定宽度，另一列填充用剩余空间。

float+overflow:hidden

实现方式：

• 如果是普通的两列布局，通过浮动+普通元素的margin可以实现。
• 如果是自适应的两列布局，通过float+overflow:hidden可以实现，这种办法主要通过overflow触发BFC，而BFC不会重叠浮动元素。

flex

实现方式：通过flex弹性盒子布局实现。

grid

实现方式：通过grid布局实现。

三列布局

三列布局（圣杯布局）

实现方式：

• 通过float: left进行排列。
• 再通过margin-left和postion: relatvie进行位置调整。

center
left
right

三列布局（双飞翼布局）

在圣杯布局的基础上进一步优化。

实现方式：

• 通过float: left进行排列。
• 再通过margin: left调整位置。

center
left
right

等高布局

等高布局（正padding+负margin）

实现方式：

• 通过padding-bottom和margin-bottom实现等高。
• 再通过overflow: hidden把溢出剪切掉。

center
left
right

仿表格布局

left
center
right

粘连布局

main
footer

代码下载