面试题（七）：CSS 盒子模型

盒子模型包括以下几个部分

• Content（内容）  ：元素的实际内容。
• Padding（内边距）  ：内容周围的空白区域，位于内容和边框之间。
• Border（边框）  ：包裹内容和内边距的边界。
• Margin（外边距）  ：盒子外部的空白区域，用于与其他元素的距离。

盒模型的类型

标准盒模型(box-sizing: content-box)

在标准模式下，width和height指的是内容区域的宽度和高度, 即：元素总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)

怪异盒模型(box-sizing: border-box)

在怪异盒模型中，width和height指的是内容区域、边框、内边距总的宽度和高度，即：元素总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

示例代码和图片

<template>
   <div class="box"></div>
</template>


<style lang="scss" scoped>
  .box {
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 2px solid #000;
  }
</style>

在标准模式下：总宽度为144px(box-sizing: content-box)

在怪异模式下：总宽度为100px(box-sizing: border-box)

应用场景

标准盒模型

适用于需要精确控制内容区尺寸的场景，例如：

• 设计需要固定内容宽度的文本块。
• 图片展示区域，确保图片不被内边距和边框影响。

怪异盒模型

适用于需要固定整体大小的场景，例如：

• 固定宽度的按钮，不管内边距和边框的大小如何变化，按钮的总宽度都保持不变。
• 响应式布局中，确保元素在不同设备上具有一致的外观。