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

CSS盒模型的组成部分

内容区域（content）：这是盒模型的核心部分，用于显示元素的文本、图像等实际内容。其大小由width（宽度）和height（高度）属性控制。
内边距（padding）：围绕在内容区域周围的空白区域，它会影响元素内容与边框之间的距离。可以通过padding-top、padding-right、padding-bottom、padding-left分别设置四个方向的内边距，也可以使用padding简写属性一次设置四个方向。
边框（border）：边框位于内边距之外，用于界定元素的边界。可以通过border-width（边框宽度）、border-style（边框样式，如 solid、dashed 等）和border-color（边框颜色）来设置边框的外观，也有border简写属性。
外边距（margin）：外边距是在边框之外的空白区域，用于控制元素与其他元素之间的距离。同样有margin-top、margin-right、margin-bottom、margin-left以及margin简写属性。

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

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

content-box

计算方式：在content-box模式下，width和height只应用于内容区域。内边距、边框和外边距都在这个设定的宽度和高度之外。也就是说，实际渲染的元素宽度 = width + padding-left + padding-right + border-left-width + border-right-width，实际渲染的元素高度同理。
示例：

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

<head>
  <style>
    .box-content-box {
        box-sizing: content-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid black;
        background-color: lightblue;
      }
  </style>
</head>

<body>
  <div class="box-content-box">content-box示例</div>
</body>

</html>

在这个例子中，元素内容区域宽度为200px，高度为100px。加上左右内边距共40px，左右边框共10px，实际渲染的元素宽度为200 + 40 + 10 = 250px；高度同理为100 + 40 + 10 = 150px。

border-box

计算方式：在border-box模式下，width和height属性包括了内容区域、内边距和边框。即实际渲染的元素宽度和高度就是设定的width和height值，内容区域的宽度和高度会自动调整以适应设定值减去内边距和边框宽度。
示例：

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

<head>
  <style>
    .box-border-box {
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid black;
        background-color: lightgreen;
      }
  </style>
</head>

<body>
  <div class="box-border-box">border-box示例</div>
</body>

</html>

这里设定元素宽度为200px，高度为100px。这200px包含了20px的左内边距、20px的右内边距和5px的左边框、5px的右边框，那么内容区域的宽度为200 - 20 - 20 - 5 - 5 = 150px；高度同理，内容区域高度为100 - 20 - 20 - 5 - 5 = 50px。

星途面试题库

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

知识考点

面试题答案

CSS盒模型的组成部分

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

content-box

border-box