知识库

Appearance

CSS 布局 ​

BFC · 定位 · Flex · 居中 · 多栏布局

1. BFC（块级格式化上下文） ​

定义：独立布局环境，内部元素不受外部影响。

触发条件：

  • float 非 none
  • position: absolute/fixed
  • display: inline-block/flex/table-cell
  • overflow: hidden/auto/scroll

作用：

  • 解决 margin 重叠
  • 解决高度塌陷（包含浮动子元素）
  • 自适应两栏布局

2. position 定位 ​

值基准文档流
relative自身位置保留
absolute最近非 static 祖先脱离
fixed视口脱离
sticky滚动位置切换保留

口诀：子绝父相

3. Flex 布局 ​

容器属性：

  • flex-direction：主轴方向（row/column）
  • justify-content：主轴对齐
  • align-items：交叉轴对齐
  • flex-wrap：换行

项目属性：

  • flex-grow：正剩余空间分配（默认 0）
  • flex-shrink：负剩余空间收缩（默认 1）
  • flex-basis：分配前占据空间（默认 auto）
  • flex: 1 = flex-grow:1; flex-shrink:1; flex-basis:0%

4. 居中方案 ​

方案代码要求
Flexjustify-content:center; align-items:center父元素 flex
position + margin auto四方向 0 + margin:auto固定宽高
position + transformtop:50%; left:50%; transform:translate(-50%,-50%)无要求
position + 负 margintop:50%; margin-top:-高度/2固定宽高

5. 两栏布局（左固定右自适应） ​

方式一：浮动 + margin

css
.left { float: left; width: 200px; }
.right { margin-left: 200px; }

方式二：浮动 + BFC

css
.left { float: left; width: 200px; }
.right { overflow: hidden; }

方式三：Flex（推荐）

css
.outer { display: flex; }
.left { width: 200px; }
.right { flex: 1; }

6. 三栏布局（左右固定中间自适应） ​

方式一：Flex（推荐）

css
.outer { display: flex; }
.left { width: 100px; }
.right { width: 200px; }
.center { flex: 1; }

方式二：绝对定位

css
.outer { position: relative; }
.left { position: absolute; left: 0; width: 100px; }
.right { position: absolute; right: 0; width: 200px; }
.center { margin-left: 100px; margin-right: 200px; }

方式三：浮动（中间放最后）

css
.left { float: left; width: 100px; }
.right { float: right; width: 200px; }
.center { margin-left: 100px; margin-right: 200px; }

方式四/五：圣杯布局 / 双飞翼布局（浮动 + 负 margin）

7. 外边距重叠 ​

  • 相邻盒子外边距合并
  • 两正取大、两负取绝对值大、一正一负取和
  • 浮动和绝对定位元素不折叠

解决：

  • 兄弟：inline-block / float / absolute
  • 父子：父 overflow:hidden / 加透明边框

8. 清除浮动 ​

推荐方式：::after 伪元素

css
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

9. inline-block 间隙 ​

原因：行内元素间空白字符被渲染为空格

解决：

  • 删除 HTML 空格/换行
  • 父元素 font-size: 0（子元素重设）
  • letter-spacing: -8px
  • 使用 float: left