盒模型详解
内容区/padding/border/margin 四层结构、标准盒模型 vs IE 盒模型
盒模型详解
CSS 盒模型是布局的基础——每个元素都是一个矩形盒子，由四层组成。
学完本章你将： 掌握四层结构、标准盒模型 vs IE 盒模型。
四层结构
┌─────────────────────────────┐
│ margin（外边距） │
│ ┌───────────────────────┐ │
│ │ border（边框） │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding（内边距）│ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ （内容区） │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘标准盒模型（content-box）
css
.box {
width: 300px; /* 只是内容区的宽度 */
padding: 20px; /* + 左右 40px */
border: 5px solid; /* + 左右 10px */
}
/* 实际占用宽度 = 300 + 40 + 10 = 350px */IE 盒模型（border-box）
css
.box {
box-sizing: border-box;
width: 300px; /* 内容+padding+border 总宽 300px */
padding: 20px;
border: 5px solid;
}
/* 内容区自动缩小 = 300 - 40 - 10 = 250px */💡 全局推荐设置：
*, *::before, *::after { box-sizing: border-box; }