HTML 基础盒子模型与盒子定位详解

多喝开水@

328人浏览 · 2026-05-20 08:02:19

多喝开水@ · 2026-05-20 08:02:19 发布

今天我们就从基础概念、属性用法到实际案例，一次性把盒子模型与定位机制这两个概念讲明白。

一、什么是盒子模型？

在 HTML 中，所有元素都可以被看作一个“盒子”，它由四部分组成，从内到外分别是：

内容区（Content）
内边距（Padding）
边框（Border）
外边距（Margin）

这四个部分共同决定了元素的大小、间距和外观。

1. 内容区（Content）

内容区是盒子的核心部分，用来显示文本、图片或其他媒体内容。

可以通过 width 和 height 属性直接设置内容区的宽高。
文本的大小、对齐方式可以通过 font-size 、 text-align 等属性调整。

如：

<div style="width: 100px; height: 100px; font-size: 60px; font-weight: 800;">
  1
</div>

2. 内边距（Padding）

内容区与边框之间的透明空间，通过 padding 属性控制。

可以同时设置四个方向的值： padding: 上右下左;
也可以单独设置某一个方向： padding-top / padding-right / padding-bottom / padding-left
它会扩大元素的整体尺寸，但不会影响其他元素的布局（除非设置了 box-sizing: border-box ）。

如：

div {
  padding: 10px; /* 四个方向都设置为10px */
  padding-left: 20px; /* 仅左侧内边距为20px */
}

3. 边框（Border）

围绕内边距和内容的边界线，通过 border  属性设置样式、宽度和颜色。

基础语法： border: 宽度样式颜色;
常用样式： solid （实线）、 dashed （虚线）、 dotted （点线）
还可以通过 border-radius  实现圆角效果：
border-radius: 150px 0;  可以让盒子变成圆角矩形
border-radius: 50%;  会让正方形盒子变成圆形
也可以单独设置某一个角： border-top-left-radius: 20%;

如：

div {
  border: 5px solid greenyellow; /* 绿色实线边框，宽度5px */
  border-top-left-radius: 20%; /* 仅左上角为圆角 */
}

4. 外边距（Margin）

边框之外的透明空间，通过 margin 属性控制，用来设置元素与其他元素之间的距离。
和 padding 类似，可以同时设置四个方向，也可以单独设置某一个方向。
外边距可能会发生“合并”现象（垂直方向相邻元素的外边距会取最大值），需要特别注意。

如：

.box1 {
  margin-bottom: 50px; /* 下方外边距50px */
}
.box2 {
  margin-top: 90px; /* 上方外边距90px */
}

5. 盒子阴影（box-shadow）

可以给盒子添加阴影效果，增强立体感。

语法： box-shadow: 水平偏移垂直偏移模糊半径扩展半径颜色;
如：

div {
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

效果就是盒子下方出现柔和的阴影，让元素看起来像是浮在页面上。

二、盒子定位

1. 相对定位（position: relative）

相对定位是“相对自己原来的位置”进行偏移，特点如下：

元素仍占据文档流中的原始位置，不会脱离文档流。
视觉上可以通过 top / right / bottom / left 属性偏移，但周围元素不会受影响，仍按原始位置排列。
偏移值是相对于元素自身原来的位置计算的：
left: 20px ：元素向右移动20px
right: 20px ：元素向左移动20px
可以通过正负值控制偏移方向，比如 left: -20px 会让元素向左移动20px。
常用场景：微调元素位置，或者作为绝对定位元素的“父容器”（给绝对定位元素提供参照）。

如：

div1 {
  position: relative;
  right: 20px; /* 元素向左偏移20px */
}

2. 绝对定位（position: absolute）

绝对定位是相对于“最近的已定位祖先元素”进行定位，如果没有这样的祖先元素，则相对于浏览器窗口（视口）定位，特点如下：

元素脱离正常文档流，不再占据原来的空间，周围的元素会自动填充它的位置。
可以通过 top  / right  / bottom  / left  精确控制位置。
常和 z-index  属性配合，控制元素的层叠顺序，实现元素的上下覆盖效果。
当父元素设置了 position: relative ，子元素设置 position: absolute  时，子元素会以父元素为参照进行定位。

如：

.box {
  position: absolute;
  top: 0;
  right: 0; /* 定位到父元素的右上角 */
}

三、相对定位和绝对定位核心区别

特性相对定位（relative）绝对定位（absolute）
是否脱离文档流不脱离，保留原始位置脱离，不保留原始位置
定位参照自身原始位置最近的已定位祖先元素/视口
对周围元素的影响不影响，周围元素位置不变影响，周围元素会填充它的位置
常用场景微调位置、作为定位父容器弹窗、悬浮按钮、层叠布局

四、完整示例代码

我们可以写一个完整的 HTML 示例，同时演示盒子模型和定位的用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型与定位</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      font-size: 60px;
      font-weight: 800;
      border: 5px solid greenyellow;
      margin-bottom: 50px;
      border-top-left-radius: 20%;
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      position: relative;
      right: 20px; 
    }
    .box2 {
      width: 100px;
      height: 100px;
      font-size: 60px;
      font-weight: 800;
      border: 5px solid rebeccapurple;
      margin-top: 90px;
      position: absolute;
      top: 150px;
      left: 100px; 
    }
  </style>
</head>
<body>
  <div class="box1">1</div>
  <div class="box2">2</div>
</body>
</html>

盒子1 保持了文档流中的位置，只是视觉上向左偏移了20px，还带有圆角和阴影。
盒子2 脱离了文档流，定位在视口的指定位置，不会影响其他元素的布局。