知识库

Appearance

Return to top
On this page

CSS 盒模型

CSS 盒模型描述了 HTML 元素的矩形框，它定义了元素的宽度、高度、边距和边框。

概述

盒模型由四个部分组成：内容区域(content)、内边距(padding)、边框(border)和外边距(margin)。

盒模型组成

内容区域 (Content)

包含实际内容，如文本、图像等：

css
.box {
  width: 200px;
  height: 100px;
}

内边距 (Padding)

内容与边框之间的空间：

css
.box {
  padding: 10px;
  /* 或分别设置 */
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

边框 (Border)

围绕内容和内边距的边线：

css
.box {
  border: 2px solid #ccc;
  /* 等同于 */
  border-width: 2px;
  border-style: solid;
  border-color: #ccc;
}

外边距 (Margin)

元素与其他元素之间的空间：

css
.box {
  margin: 20px;
  /* 或分别设置 */
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

box-sizing 属性

content-box (默认)

宽度和高度只包括内容区域：

css
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #ccc;
  /* 实际宽度 = 200 + 20*2 + 5*2 = 250px */
}

border-box

宽度和高度包括内容、内边距和边框：

css
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #ccc;
  /* 实际宽度 = 200px */
}

垂直外边距合并

相邻元素的垂直外边距会合并：

css
.top {
  margin-bottom: 20px;
}

.bottom {
  margin-top: 30px;
  /* 实际合并后的外边距 = 30px (取较大值) */
}

实用技巧

创建不塌陷的外边距

使用 border 或 padding 防止外边距合并：

css
.container {
  border: 1px solid transparent;
}

负外边距

可以使用负值外边距来重叠元素：

css
.overlap {
  margin-left: -10px;
}

最佳实践

  • 使用 box-sizing: border-box 使布局更可预测
  • 合理使用外边距和内边距来创建间距
  • 理解盒模型对于布局的重要性