首页常见问题正文

Border-box与content-box的区别?

更新时间:2023年10月18日11时10分来源:传智教育浏览次数:

好口碑IT培训

　　在web前端开发中，box-sizing属性用于指定元素的盒模型(box model)，有两个常用的取值：content-box 和 border-box，它们的主要区别在于元素的宽度和高度的计算方式。下面笔者将详细说明它们的区别并提供代码演示。

　　1.content-box：

　　(1)默认的盒模型。

　　(2)元素的宽度和高度只包括内容部分，不包括边框和内边距。

　　(3)如果我们设置一个元素的宽度为100px，那么内容部分的宽度就是100px，而边框和内边距会额外占据空间。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid black;
      box-sizing: content-box;
    }
  </style>
</head>
<body>
  <div class="box">Content Box</div>
</body>
</html>

　　在上面的示例中，.box 元素的总宽度是100px(内容宽度)+2*10px(左右内边距)+2*2px(左右边框)，所以实际宽度是124px。

　　2.border-box：

　　(1)设置元素的盒模型为border-box后，元素的宽度和高度包括内容、边框和内边距。

　　(2)这意味着我们可以更方便地控制元素的总宽度和高度，而不必担心边框和内边距增加的空间。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid black;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">Border Box</div>
</body>
</html>

　　在上面的示例中，.box元素的总宽度仍然是100px，但这次包括了内容、内边距和边框。因此，边框和内边距不会增加元素的总宽度。

　　通常情况下，border-box更常用，因为它让元素的尺寸更容易管理，特别是在响应式设计中。

上一篇：React+ Redux+ ReactRouter教程,React全家桶一套掌握 下一篇：JS怎样判断数组类型?