Ceryn

CSS 盒模型

7分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 盒模型

盒模型 | MDN

引入

网页中的每个元素都可以看成一个盒子。

盒模型用来描述这个盒子的内容、内边距、边框和外边距，是理解 CSS 布局的基础。

正文

定义

定义

CSS 盒模型用于描述元素在页面中占据的空间，由 content、padding、border、margin 组成。

一个元素不是只有内容本身。

它还可能有内边距、边框和外边距，这些都会影响元素在页面中的大小和位置。

组成

盒模型主要由四部分组成：

部分作用
content内容区域，显示文字、图片等内容
padding内边距，内容和边框之间的距离
border边框，包在内容和内边距外面
margin外边距，元素和其他元素之间的距离

可以简单理解为：

margin
  border
    padding
      content

语法

常见写法：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid #cccccc;
  margin: 16px;
}

这里的 .box 实际占据的空间，不只包括 width 和 height，还要加上 padding、border 和 margin。

content

content 是元素的内容区域。

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

默认情况下，width 和 height 设置的是内容区域的宽高。

padding

padding 是内边距，用来控制内容和边框之间的距离。

.box {
  padding: 20px;
}

如果给按钮设置 padding，按钮内部文字周围就会有更多空间。

<button class="btn">提交</button>
.btn {
  padding: 8px 16px;
}

这里的 8px 是上下内边距，16px 是左右内边距。

border

border 是边框，用来显示元素的边界。

.card {
  border: 1px solid #dddddd;
}

常见写法由三部分组成：

border: 宽度 样式 颜色;

例如：

.card {
  border: 2px solid red;
}

这里的 2px 是边框宽度，solid 是实线，red 是边框颜色。

margin

margin 是外边距，用来控制元素和其他元素之间的距离。

.box {
  margin: 20px;
}

如果两个元素之间太挤，可以通过 margin 拉开距离。

<p class="text">第一段文字</p>
<p class="text">第二段文字</p>
.text {
  margin-bottom: 16px;
}

这里的 margin-bottom 用于设置元素下方的外边距。

四个方向写法

padding 和 margin 都可以分别控制四个方向。

.box {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

也可以使用简写。

.box {
  margin: 10px 20px 30px 40px;
}

顺序是：上、右、下、左。

可以按顺时针方向记：从上开始，顺时针一圈。

常见简写规则：

写法含义
margin: 10px;四个方向都是 10px
margin: 10px 20px;上下 10px，左右 20px
margin: 10px 20px 30px;上 10px，左右 20px，下 30px
margin: 10px 20px 30px 40px;上、右、下、左

padding 的简写规则也一样。

标准盒模型

默认情况下，CSS 使用标准盒模型。

.box {
  width: 200px;
  padding: 20px;
  border: 1px solid #000000;
}

在标准盒模型中，width 只表示 content 的宽度。

元素实际占据的宽度是：

content width + padding left + padding right + border left + border right

也就是：

200px + 20px + 20px + 1px + 1px = 242px

box-sizing

box-sizing 用来控制宽高的计算方式。

.box {
  box-sizing: border-box;
}

常见值：

值作用
content-box默认值，width 和 height 只包含内容区域
border-boxwidth 和 height 包含内容、内边距和边框

使用 border-box 后，设置的 width 会更符合直觉。

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 1px solid #000000;
}

这时 .box 的总宽度仍然是 200px，不会因为 padding 和 border 继续变大。

很多项目会统一这样设置：

* {
  box-sizing: border-box;
}

例子

做一个简单卡片

<div class="card">
  <h2>标题</h2>
  <p>这是一段卡片内容。</p>
</div>
.card {
  width: 280px;
  padding: 20px;
  border: 1px solid #dddddd;
  margin: 16px;
  background-color: #ffffff;
}

这个例子中：

  • width 控制内容宽度
  • padding 控制卡片内部空间
  • border 显示卡片边界
  • margin 控制卡片和其他元素的距离

使用 border-box 控制大小

.card {
  box-sizing: border-box;
  width: 280px;
  padding: 20px;
  border: 1px solid #dddddd;
}

这样 .card 总宽度就是 280px，更容易控制布局。

特点

  • 每个元素都可以看成一个盒子
  • 盒模型由 content、padding、border、margin 组成
  • padding 是元素内部的距离
  • margin 是元素外部的距离
  • border 会占据元素空间
  • 默认 width 和 height 只控制内容区域
  • box-sizing: border-box; 可以让宽高包含 padding 和 border

注意事项

  • padding 会让元素内部变宽或变高
  • margin 用来控制元素之间的距离，不是控制内容和边框的距离
  • 标准盒模型中，设置了 padding 和 border 后，元素实际大小会变大
  • 写布局时，常用 box-sizing: border-box; 减少尺寸计算麻烦
  • 上下相邻块级元素的 margin 可能会发生外边距合并

理解

可以把一个元素理解为一个快递盒。

content 是盒子里面真正的物品，padding 是物品和盒子边缘之间的填充，border 是盒子的外壳，margin 是这个盒子和其他盒子之间的距离。

盒模型的重点不是背概念，而是知道页面上一个元素为什么会占这么大、为什么和旁边元素有距离。

理解盒模型后，调间距、做卡片、按钮、布局都会更清楚。

引出

理解了盒模型之后，可以继续学习 CSS 边距，更细地理解 margin 的用法和外边距合并问题。

关系图谱

反向链接