CSS 盒模型

什么是盒模型

CSS盒模型是CSS布局的基础，每个元素都被表示为一个矩形的盒子，包含内容、内边距、边框和外边距。

盒模型组成

┌─────────────────────────────────────┐
│           Margin (外边距)           │
│  ┌───────────────────────────────┐  │
│  │        Border (边框)          │  │
│  │  ┌─────────────────────────┐  │  │
│  │  │   Padding (内边距)      │  │  │
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │   Content (内容)  │  │  │  │
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

盒模型属性

1. Content（内容）

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

2. Padding（内边距）

.box {
  padding: 10px;           /* 四边相同 */
  padding: 10px 20px;      /* 上下10px，左右20px */
  padding: 10px 20px 30px; /* 上10px，左右20px，下30px */
  padding: 10px 20px 30px 40px; /* 上右下左 */
  
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

3. Border（边框）

.box {
  border: 1px solid #000;        /* 宽度 样式 颜色 */
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  
  border-top: 2px dashed red;
  border-right: 2px dotted blue;
  border-bottom: 2px solid green;
  border-left: 2px double purple;
  
  border-radius: 5px;            /* 圆角 */
  border-radius: 5px 10px;       /* 左上右下5px，右上左下10px */
  border-radius: 5px 10px 15px 20px; /* 左上右上右下左下 */
  
  border-top-left-radius: 5px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 20px;
}

4. Margin（外边距）

.box {
  margin: 10px;           /* 四边相同 */
  margin: 10px 20px;      /* 上下10px，左右20px */
  margin: 10px 20px 30px; /* 上10px，左右20px，下30px */
  margin: 10px 20px 30px 40px; /* 上右下左 */
  
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
  
  margin: auto;           /* 水平居中 */
  margin: 10px auto;      /* 上下10px，水平居中 */
}

盒模型类型

1. 标准盒模型（content-box）

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}

/* 实际宽度 = width + padding + border */
/* 实际宽度 = 200px + 20px * 2 + 5px * 2 = 250px */

2. IE盒模型（border-box）

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}

/* 实际宽度 = width */
/* 实际宽度 = 200px */
/* 内容宽度 = width - padding - border */
/* 内容宽度 = 200px - 20px * 2 - 5px * 2 = 150px */

全局设置

* {
  box-sizing: border-box;
}

盒模型应用

1. 居中元素

/* 水平居中 */
.box {
  width: 200px;
  margin: 0 auto;
}

/* 水平垂直居中（绝对定位） */
.box {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 水平垂直居中（Flexbox） */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2. 清除浮动

/* 方法1: 使用clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 方法2: 使用overflow */
.container {
  overflow: hidden;
}

/* 方法3: 使用伪元素 */
.container::after {
  content: "";
  display: block;
  clear: both;
}

3. 外边距合并

/* 垂直外边距合并 */
.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

/* 实际间距 = max(20px, 30px) = 30px */

/* 防止外边距合并 */
.container {
  overflow: hidden; /* 或使用padding/border */
}

盒模型计算

1. 实际尺寸计算

/* 标准盒模型 */
.box {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}

/* 实际宽度 = 200px + 20px * 2 + 5px * 2 = 250px */
/* 实际高度 = 100px + 20px * 2 + 5px * 2 = 150px */

/* IE盒模型 */
.box {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
}

/* 实际宽度 = 200px */
/* 实际高度 = 100px */

2. 百分比计算

.box {
  width: 50%;       /* 父元素宽度的50% */
  padding: 10%;     /* 父元素宽度的10% */
  margin: 5%;       /* 父元素宽度的5% */
}

面试常见问题

1. 标准盒模型和IE盒模型的区别？

• 标准盒模型（content-box）: width只包含内容宽度，不包含padding和border
• IE盒模型（border-box）: width包含内容、padding和border

/* 标准盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

2. 如何设置盒模型类型？

使用box-sizing属性设置盒模型类型。

/* 标准盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

/* 全局设置 */
* {
  box-sizing: border-box;
}

3. 外边距合并是什么？

垂直方向上相邻的两个外边距会合并成一个外边距，取两者中的较大值。

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

/* 实际间距 = max(20px, 30px) = 30px */

4. 如何防止外边距合并？

• 使用overflow: hidden
• 使用padding或border
• 使用display: flex或display: grid
• 使用绝对定位

.container {
  overflow: hidden;
}

5. 如何实现元素居中？

/* 水平居中 */
.box {
  margin: 0 auto;
}

/* 水平垂直居中（绝对定位） */
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 水平垂直居中（Flexbox） */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

通过理解CSS盒模型的概念和应用，可以更好地控制元素的布局和尺寸。