CSS之标准盒模型 & 怪异盒模型

1. 标准盒模型（Content-Box）

.standard-box {
    box-sizing: content-box;  /* 默认值 */
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid #000;
    margin: 10px;
}

实际占用空间计算：

• 总宽度 = width + padding-left + padding-right + border-left + border-right
• 总高度 = height + padding-top + padding-bottom + border-top + border-bottom

上面的例子中：

• 总宽度 = 200px + 20px + 20px + 5px + 5px = 250px
• 总高度 = 100px + 20px + 20px + 5px + 5px = 150px

如图：

2. 怪异盒模型（Border-Box）

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

实际占用空间计算：

• 内容区域宽度 = width - padding-left - padding-right - border-left - border-right
• 内容区域高度 = height - padding-top - padding-bottom - border-top - border-bottom

上面的例子中：

• 总宽度 = 200px（包含padding和border）

• 总高度 = 100px（包含padding和border）

• 内容区域宽度 = 200px - 40px - 10px = 150px

• 内容区域高度 = 100px - 40px - 10px = 50px

注：父元素设置宽度为200px, 子元素width:100%; 此时子元素实际为150px, 即去掉了左右padding和border