面试题：CSS中盒模型相关面试题

CSS盒模型组成部分

内容区域（content）：盒子的核心部分，用于显示文本、图像等实际内容。其尺寸由 width 和 height 属性控制（在 content-box 盒模型下）。例如，一个 <div> 元素设置 width: 200px; height: 100px;，这里的 200px 和 100px 就是内容区域的宽度和高度。
内边距（padding）：在内容区域和边框之间的空白区域。它会增加盒子的整体尺寸，并且背景会延伸到内边距区域。可以通过 padding-top、padding-right、padding-bottom、padding-left 分别设置四个方向的内边距，也可以使用 padding 简写属性。如 padding: 10px 20px; 表示上下内边距为 10px，左右内边距为 20px。
边框（border）：围绕在内边距之外的线。其样式、宽度和颜色可以通过 border-style、border-width、border-color 等属性设置。例如 border: 1px solid black; 表示设置一个宽度为 1px、颜色为黑色的实线边框。
外边距（margin）：在边框之外的空白区域，用于分隔相邻的盒子。与内边距不同，外边距不会影响背景的显示范围。同样有 margin-top、margin-right、margin-bottom、margin-left 以及 margin 简写属性。比如 margin: 30px; 表示所有方向的外边距均为 30px。

box-sizing属性改变盒模型计算方式

box-sizing 属性有两个主要取值：content-box 和 border-box。

content-box（默认值）：在这种模式下，width 和 height 只应用于内容区域。内边距、边框和外边距需要另外计算并加在内容区域尺寸之上，才是盒子的实际渲染尺寸。例如，一个元素设置 width: 200px; height: 100px; padding: 10px; border: 1px solid black;，那么这个元素在水平方向上实际占据的宽度是 200px（内容宽度） + 2 * 10px（左右内边距） + 2 * 1px（左右边框宽度） = 222px；垂直方向上实际占据的高度是 100px（内容高度） + 2 * 10px（上下内边距） + 2 * 1px（上下边框宽度） = 122px。
border-box：在这种模式下，width 和 height 包括了内容区域、内边距和边框。也就是说，当设置了 width 和 height 后，再设置内边距和边框不会增加盒子的实际渲染尺寸，而是从已设置的 width 和 height 中分配空间。例如，同样一个元素设置 box-sizing: border-box; width: 200px; height: 100px; padding: 10px; border: 1px solid black;，此时元素在水平方向和垂直方向上实际占据的尺寸就是设置的 200px 和 100px，其中内容区域的宽度为 200px - 2 * 10px（左右内边距） - 2 * 1px（左右边框宽度） = 178px，高度为 100px - 2 * 10px（上下内边距） - 2 * 1px（上下边框宽度） = 78px。

不同取值在实际布局中的应用场景

content-box：
- 场景：当你明确知道内容区域的尺寸，并且希望内边距、边框和外边距在这个基础上增加额外空间时使用。例如，在设计一个固定尺寸的图片展示区域，图片尺寸固定，周围需要添加一定的空白（内边距）和边框，此时使用 content-box 能准确控制图片区域和额外空白区域的大小。
- 示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .image-container {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 1px solid #000;
        box-sizing: content-box;
      }

    .image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
  </style>
</head>

<body>
  <div class="image-container">
    <img src="example.jpg" alt="示例图片" class="image">
  </div>
</body>

</html>

border-box：
- 场景：在响应式布局中，当你希望元素在不同屏幕尺寸下保持固定的整体尺寸，同时又能灵活调整内容、内边距和边框的分配时使用。比如，设计一个按钮，无论在手机还是桌面端，按钮的整体尺寸保持一致，但内边距和边框可以根据屏幕大小适当调整，使用 border-box 就可以轻松实现。
- 示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    button {
      width: 150px;
      height: 50px;
      padding: 10px;
      border: 2px solid #007BFF;
      box-sizing: border-box;
      background-color: #007BFF;
      color: white;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <button>点击我</button>
</body>

</html>

面试题：CSS中盒模型相关面试题

知识考点

面试题答案

CSS盒模型组成部分

box-sizing属性改变盒模型计算方式

不同取值在实际布局中的应用场景