1、盒模型

定义：每个元素都表现成的一个矩形盒子。它决定了元素在页面上的大小、所占空间以及与其它元素的关系。

一个盒模型有内到外包含四个部分：

1）content（内容区）：显示文字、图片等实际内容占据的区域。通过width、height设置其大小；

2）padding（内边距）：内容与边框之间的间距，会撑大元素的背景区域；

3）border（边框）：包裹在内边距外部的边界线；

4）margin（外边距）：盒子与外部的距离，用于控制元素之间的间距。

盒模型类型

1）标准盒模型（默认）

元素设置的 width 和 height 只作用于content（内容区）；

实际宽度 = content (width) + padding (左右) + border(左右) + margin(左右)

2）怪异盒模型（IE盒模型）

元素设置的 width 和 height 作用于 content + padding + border

实际总宽度 =  width + margin(左右)

切换盒模型的方式：设置 box-sizing

box-sizing: content-box;  // 标准盒模型（默认）

box-sizing: border-box;   // 怪异盒模型

2、BFC（块级格式化上下文）

定义：是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

触发BFC条件：

1）float: left / right (且不为none)；

2）position: absolute / fixed;

3）display: inline-block /  flex  / inline-flex / grid / inline-grid / table / table-cell / table-caption

4）overflow: auto / hidden / scroll  (且不为visible)

5）contain: layout / content / paint;

6）根元素 html 自带 BFC.

特点：

1）属于同一个  BFC 的两个相邻 Box  垂直排列；

2）属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（上下margin合并，取最大值）；

3）BFC 的区域不会与 float 的元素区域重叠；===>  会“紧贴”在浮动元素之后 

        普通块级元素会“钻到”浮动元素下方；

4）BFC 内部与外部隔离：内外的元素不会相互影响；

5）可以用于清除浮动：如果一个父元素没有设置高度，且子元素全部浮动，父元素高度会塌陷为0。===>  触发父元素的 BFC 后，父元素会包裹所有浮动的子元素，恢复正常高度。

应用场景1）父元素高度塌陷

1、父元素高度塌陷 
方案：触发父元素BFC
.parent {
    overflow:hidden;
}

2、自适应两栏布局
方案：左侧浮动，右侧触发 BFC
.left { float: left; width: 200px; }
.right { overflow: hidden; } /* BFC 使其不环绕浮动元素 */

3、层叠上下文

定义：是CSS中的一个三维概念，表示元素在Z轴（垂直于屏幕）上的层叠关系，决定了哪个元素在上方、哪个元素在下方,从而形成谁覆盖谁的效果。

形成堆叠上下文的条件（满足其一）：

  • 根元素（<html>）—— 默认就有一个最外层的层叠上下文。

  •  position: relative 或 absolute 且 z-index 值不为 auto。

  •  position: fixed 或 sticky（现代浏览器默认会形成）。

  • flex 容器的子项，且父级设置 display: flex/inline-flex，子项的 z-index 不为 auto。

  • grid 容器的子项，且父级设置 display: grid，子项的 z-index 不为 auto。

  • 透明度 opacity 值小于 1。

  • transform 值不为 none。

  • filter 值不为 none。

  • will-change 值为上述会引起新上下文的属性（如 will-change: opacity）。

  • contain: layout/paint、mix-blend-mode 不为 normal、isolation: isolate 等。

层叠等级：

在同一层叠上下文中，层叠等级才有意义；

z-index优先级最高；

4、左右居中方案

1）行内(inline)、行内块(inline-block)元素  text-align:center;

2）Flexbox（推荐），justify-content:center;

3）Grid布局

4）定宽块级元素 

方案1 ： 子元素 margin:0 auto;

方案2：子元素绝对定位 + left:50% + margin-left：- width/2
.parent {
  position: relative;
}
.child {
  position: absolute;
  width: 200px;
  left: 50%;
  margin-left: -100px; /* 负的宽度一半 */
}

5）未知宽度

方案1：绝对定位 + left:50% + translateX(-50%)  偏移自身宽度的一半
.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

5、上下垂直居中方案

1）行内（inline）、行内块（inline-block）元素：设置 line-height 等于父容器高度，配合 text-align 可实现水平+垂直居中.

.parent {
  height: 100px;
  line-height: 100px; /* 与父容器高度一致 */
  text-align: center; /* 可选，水平居中 */
}
.child {
  display: inline-block;
  vertical-align: middle; /* 确保行内块垂直对齐 */
}

2）table布局（明确高度）

      父元素：display:table;

      子元素：display:table-cell; vertical-align:middle;

3）绝对定位+负margin（明确高度）

子元素绝对定位，top:50% + margin-top = - height/2

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 高度一半的负值 */
}

4）绝对定位+translateY(-50%)（未知高度）

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5）Flexbox

6）Grid

7）绝对定位 + margin: auuto 0;

.parent {
  position: relative;
  height: 300px;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  height: 100px; /* 必须固定高度 */
}

6、选择器权重

7、清除浮动

是指解决因子元素浮动（float）导致父元素高度塌陷的问题。当父元素内所有子元素都浮动时，父元素无法自动撑开高度，从而影响后续布局。

1）在浮动元素后加 空的div元素，设置clear:both;

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>

2）给父元素添加 overflow:hidden 或 auto ===> 触发 BFC

3）给父元素添加伪类 （最常用） ===》也是在元素末尾添加一个空的div元素，设置clear:both

.parent::after {
  content: "";
  display: block;
  clear: both;
}

4）父元素使用 display: flow-root（现代最佳）

8、左边定宽，右边自适应

1）Flexbox（最推荐）

.container {
  display: flex;
}
.left {
  width: 200px;          /* 固定宽度 */
  background: lightblue;
}
.right {
  flex: 1;               /* 占据剩余空间 */
  background: lightcoral;
}

2）Grid布局：

父容器 display: grid，设置网格模板：第一列固定，第二列自适应 1fr。

.container {
  display: grid;
  grid-template-columns: 200px 1fr;  /* 左边200px，右边占满剩余 */
}
.left {
  background: lightblue;
}
.right {
  background: lightcoral;
}

3）浮动+BFC(overflow:hidden)

.left {
  float: left;
  width: 200px;
  background: lightblue;
}
.right {
  overflow: hidden;     /* 触发 BFC，不环绕浮动元素 */
  background: lightcoral;
}

4）浮动 + margin-left（需要清除浮动影响）

左侧浮动，右侧设置 margin-left 等于左侧宽度。

.left {
  float: left;
  width: 200px;
  background: lightblue;
}
.right {
  margin-left: 200px;   /* 留出左侧空间 */
  background: lightcoral;
}
/* 父元素清除浮动 */
.container::after {
  content: "";
  display: block;
  clear: both;
}

5）绝对定位

父元素相对定位，左侧固定宽，右侧绝对定位并设置 left 为左侧

.container {
  position: relative;
}
.left {
  width: 200px;
  background: lightblue;
}
.right {
  position: absolute;
  left: 200px;
  right: 0;
  background: lightcoral;
}

6）表格布局 display:table

父元素 display: table，左右设为 display: table-cell

.container {
  display: table;
  width: 100%;
}
.left {
  display: table-cell;
  width: 200px;
  background: lightblue;
}
.right {
  display: table-cell;
  background: lightcoral;
}

9、左右两边定宽，中间自适应

1）Flexbox（最推荐）

父容器 display: flex，左右固定宽度，中间 flex: 1 自动填充剩余空间。

.container {
  display: flex;
}
.left {
  width: 200px;
  background: lightblue;
}
.center {
  flex: 1;           /* 占据剩余宽度 */
  background: lightcoral;
}
.right {
  width: 150px;
  background: lightgreen;
}

2）Grid布局

父容器 display: grid，使用 grid-template-columns 定义三列：固定 固定 自适应。


.container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;  /* 左右固定，中间自适应 */
}
.left {
  background: lightblue;
}
.center {
  background: lightcoral;
}
.right {
  background: lightgreen;
}

3）浮动 + BFC

左侧左浮动，右侧右浮动，中间触发 BFC（overflow: hidden）自动占满剩余宽度。

注意：HTML 顺序必须为 左、右、中 或 左、中、右？通常让中间元素放在最后，利用 BFC 不环绕的特性。

<div class="container">
  <div class="left">左定宽</div>
  <div class="right">右定宽</div>
  <div class="center">中间自适应</div>
</div>
.left {
  float: left;
  width: 200px;
  background: lightblue;
}
.right {
  float: right;
  width: 150px;
  background: lightgreen;
}
.center {
  overflow: hidden;   /* 触发 BFC，防止环绕左右浮动 */
  background: lightcoral;
}
/* 父元素清除浮动 */
.container::after {
  content: "";
  display: block;
  clear: both;
}

4）绝对定位

父容器相对定位，左右绝对定位固定宽，中间绝对定位且 left/right 为左右宽度。

.container {
  position: relative;
  min-height: 200px;  /* 注意高度问题 */
}
.left {
  position: absolute;
  left: 0;
  width: 200px;
  background: lightblue;
}
.right {
  position: absolute;
  right: 0;
  width: 150px;
  background: lightgreen;
}
.center {
  position: absolute;
  left: 200px;
  right: 150px;
  background: lightcoral;
}

5）圣杯布局（传统浮动 + 负边距）

HTML 顺序为：中间先写，左、右后写。

<div class="container">
  <div class="center">中间自适应</div>
  <div class="left">左定宽</div>
  <div class="right">右定宽</div>
</div>

.container {
  padding-left: 200px;   /* 为左列腾出空间 */
  padding-right: 150px;  /* 为右列腾出空间 */
}
.center {
  float: left;
  width: 100%;
  background: lightcoral;
}
.left, .right {
  float: left;
  position: relative;
  width: 200px;
  background: lightblue;
}
.left {
  margin-left: -100%;          /* 拉回左侧 */
  left: -200px;
}
.right {
  width: 150px;
  margin-right: -150px;       /* 拉回右侧 */
  background: lightgreen;
}
/* 清除浮动 */
.container::after {
  content: "";
  display: block;
  clear: both;
}

6）表格布局（display: table）

.container {
  display: table;
  width: 100%;
}
.left, .center, .right {
  display: table-cell;
}
.left {
  width: 200px;
  background: lightblue;
}
.center {
  background: lightcoral;
}
.right {
  width: 150px;
  background: lightgreen;
}

10、position

position 是 CSS 中用于控制元素定位方式的属性，它决定了元素在页面中的位置以及如何移动。通过配合 top、right、bottom、left 四个偏移属性，可以精确调整元素的位置。

值 定位参考 是否脱离文档流 作用场景
static 无（默认值） 否 正常文档流，偏移属性无效
relative 相对于元素自身原本位置 否（原位置保留） 轻微位移、作为绝对定位的参考系
absolute 最近的非 static 祖先元素 是 精确控制位置，悬浮、覆盖效果
fixed 相对于浏览器视口（viewport） 是 固定导航栏、回到顶部按钮
sticky 混合：相对定位 + 固定定位 混合（原位置保留） 滚动到一定阈值后“粘”在顶部

1. static（默认值）

  • 元素按照正常文档流排列。

  • top/right/bottom/left 以及 z-index 无效。

  • 无需显式设置，这是所有元素的默认值。

2. relative

  • 元素仍然占据原本在文档流中的空间（不会脱离）。

  • 通过偏移属性（top、left 等）相对于自身原本位置移动，但其他元素不会来填补空隙。

  • 常用场景：

    • 微调元素位置（如文字稍微偏移）。

    • 作为 absolute 子元素的参考容器（设置 position: relative 但不偏移）。

3. absolute

  • 元素完全脱离文档流，原占位空间消失（后续元素会顶上来）。

  • 它的位置参考点是最近的非 static 祖先元素（即设置了 relative、absolute、fixed 或 sticky 的祖先）。如果一直向上找都没有，则参考 <html> 根元素（即初始包含块）。

  • 可通过 top/right/bottom/left 确定相对于参考边界的位置。

  • 常用场景：弹窗、悬浮菜单、滑动轮播的定位点。

4. fixed

  • 元素相对于浏览器视口定位（不受页面滚动影响）。

  • 完全脱离文档流，不占原位置。

  • 使用 top/right/bottom/left 相对于视口四边。

  • 常用场景：固定顶部导航栏、悬浮客服按钮、“回到顶部”按钮。

注意：fixed 元素会随着页面滚动而保持在屏幕固定位置，但某些父元素设置了 transform、perspective 或 filter 属性时，会导致 fixed 相对于该父元素而不是视口（这是一个常见坑）。

5. sticky（粘性定位）

  • 混合模式：元素在跨越特定阈值前表现为 relative（占据原位），当滚动超出阈值后表现为 fixed（固定在屏幕上）。

  • 不脱离文档流，原位置始终保留。

  • 必须通过 top/left 等指定阈值（如 top: 0 表示滚动到元素顶部距离视口顶部 0 像素时开始固定）。

  • 常用场景：表格表头粘性、分类导航栏。

各定位的层叠关系（z-index）

  • 只有非 static 定位的元素（relative/absolute/fixed/sticky）才能使用 z-index 控制堆叠顺序。

  • z-index 值越大，元素越靠近用户（在上层）。同一层叠上下文中比较。

定位偏移属性的生效条件

top、right、bottom、left 只有在元素 position 不是 static 时才有效。对于 relative，偏移相对自身；absolute、fixed、sticky 则相对各自参考容器。

# css # 前端
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

AtomGit 首发开源｜光轮智能发布全球首个十万小时级全模态人类行为开源数据集 EgoSuite-Open100K

avatar AtomGit开源社区
cover

构筑赋能金融行业应用 Agent｜20 强决战北京，一场金融 Agent 的硬核答卷

avatar AtomGit开源社区
cover

最高赢取价值万元大奖，仓颉生态创新开发挑战赛开启！

avatar AtomGit开源社区