CSS 盒子模型

CSS 盒子模型是 CSS 中最核心、最重要的概念之一。它描述了在网页布局中，每个元素都被表示为一个矩形的"盒子"，这个盒子由内容、内边距、边框和外边距组成。

盒子模型概念

• content（内容区）：显示文本或图片的区域
• padding（内边距）：内容与边框之间的空白
• border（边框）：包围内容和内边距的边框
• margin（外边距）：元素与外部元素之间的间距

┌─────────────────────────────────────────┐
│                  Margin                  │  ← 外边距（透明）
│  ┌─────────────────────────────────────┐ │
│  │               Border                │ │  ← 边框
│  │  ┌─────────────────────────────────┐ │ │
│  │  │            Padding             │ │ │  ← 内边距（透明）
│  │  │  ┌─────────────────────────────┐ │ │ │
│  │  │  │          Content            │ │ │ │  ← 内容（文字、图片等）
│  │  │  └─────────────────────────────┘ │ │ │
│  │  └─────────────────────────────────┘ │ │
│  └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

详细解析

1. 内容 - Content

盒子的核心区域，包含文本、图像或其他媒体内容。

通过 width 和 height 属性设置大小。

div {
    width: 300px;
    height: 200px;
}

2. 内边距 - Padding

内容区域与边框之间的透明空间。

使用 padding 属性设置。

div {
    padding: 20px;                    /* 上下左右都是20px */
    padding: 10px 20px;               /* 上下10px，左右20px */
    padding: 10px 20px 30px 40px;     /* 上10px、右20px、下30px、左40px（顺时针）*/
    
    /* 也可以分别设置 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

3. 边框 - Border

围绕内边距和内容的线。

使用 border 属性设置。

div {
    border: 2px solid #333;           /* 宽度 样式 颜色 */
    border: 1px dashed red;           /* 虚线边框 */
    border: 3px dotted blue;          /* 点线边框 */
    
    /* 也可以分别设置 */
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    
    /* 或只设置某一边 */
    border-top: 1px solid #ccc;
    border-right: none;               /* 移除右边框 */
}

4. 外边距 - Margin

盒子与其他盒子之间的透明空间。

使用 margin 属性设置，语法与 padding 相同。

div {
    margin: 20px;                     /* 上下左右都是20px */
    margin: 0 auto;                   /* 上下0，左右自动（水平居中）*/
    margin: 10px 20px 30px 40px;      /* 上10px、右20px、下30px、左40px */
    
    /* 也可以分别设置 */
    margin-top: 10px;
    margin-bottom: 20px;
}

两种盒子模型：标准 vs 怪异

这是盒子模型最重要的概念！CSS 有两种不同的盒子模型，它们计算元素总宽度和总高度的方式不同。

1. 标准盒子模型（content-box，默认）

总宽度 = width + + +