菜鸟教程
教程 css tutorial

盒子模型详解

网页中的每个元素都被看作一个矩形盒子，盒子模型定义了盒子的结构和组成部分，影响元素的尺寸和布局。

盒子模型组成

  1. 内容区域（content）
    显示文本或其他元素的区域。

  2. 内边距（padding）
    内容与边框之间的空白区域。

  3. 边框（border）
    围绕内容和内边距的线条。

  4. 外边距（margin）
    元素与其他元素之间的距离。

盒子尺寸计算

默认情况下，元素的总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。

例如：

css 
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;

总宽度 = 200 + 102 + 52 + 20*2 = 270px。

box-sizing 属性

可以通过 box-sizing 属性改变盒子尺寸计算方式：

  • content-box（默认）：宽高只包括内容区域，不包括内边距和边框。
  • border-box：宽高包括内容、内边距和边框，更易于布局控制。
css 
box-sizing: border-box;

盒子模型示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>盒子模型示例</title>
  <style>
    .box {
      width: 200px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
      background-color: #e0f7fa;
    }
    .box-border-box {
      width: 200px;
      padding: 10px;
      border: 5px solid #00796b;
      margin: 20px;
      background-color: #b2dfdb;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">默认 content-box 盒子模型，宽度只包含内容区</div>
  <div class="box-border-box">box-sizing: border-box，宽度包含内容、内边距和边框</div>
</body>
</html>

相关内容