首页 >web前端 >css教程 >box-sizing: border-box 实际上有什么作用?

box-sizing: border-box 实际上有什么作用?

PHPz
PHPz原创
2024-07-19 13:44:21699浏览

当我第一次开始学习CSS时,我几乎在遇到的每个CSS文件中都看到了box-sizing: border-box。像许多初学者一样,我在不了解其目的的情况下复制了它。如果这听起来很熟悉,别担心——你并不孤单。

什么是盒子大小?
CSS 中的 box-sizing 属性控制如何计算元素的宽度和高度。主要有以下三个值:

  1. content-box(默认):宽度和高度仅适用于内容,而不适用于填充或边框。如果您稍后添加内边距或边框,这可能会导致意外的尺寸。
  2. border-box:宽度和高度包括内边距和边框,使元素的总大小更可预测。
  3. inherit:元素从其父元素继承 box-sizing 值。

为什么 box-sizing: border-box?
这就是为什么 box-sizing: border-box 如此有用:

  • 宽度和高度包括内边距和边框。如果将元素的宽度设置为 200px,则无论内边距或边框如何,它始终为 200px。
  • 无需计算内边距和边框即可知道元素的总大小。这使得设计和调整布局变得更加容易。
  • 在所有元素中使用 border-box 可确保设计的一致性,使您的 CSS 更干净且更易于维护。

这里用一个简单的例子来说明"content-box""border-box"之间的区别:

内容框

<div class="content-box">
  <p>content-box</p>
</div>
.content-box {
  background-color: red;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  text-align: center;
  color: white;
}

example of content box

如截图所示,带有 box-sizing: content-box 的盒子的总宽度为 260px。原因如下:

200px 是为内容区域设置的宽度,每边 20px 总计为 40px(20px + 20px),每边 10px 总计为 20px(10px + 10px)。

总宽度:200px(内容)+ 40px(内边距)+ 20px(边框)= 260px

为什么?对于content-box,您设置的宽度仅适用于框内的内容。填充和边框添加到此宽度,增加了框的总大小。

边框

<div class=" border-box">
  <p>border-box</p>
</div>
.border-box {
  box-sizing: border-box;
  background-color: green;
  width: 200px;
  padding: 20px;
  border: 10px solid black;
  text-align: center;
  color: white;
}

an example of border box

相比之下,带有 box-sizing: border-box 的盒子的总宽度为 200px。原因如下:

200px 是为整个盒子设置的宽度,包括内容、内边距和边框,每边 20px(包含在 200px 宽度内),每边 10px(包含在 200px 宽度内)。

总宽度:200px 的宽度包含内容、内边距和边框。在此宽度之外不会添加任何额外空间。

为什么? ​​使用 border-box,您设置的宽度覆盖了框中的所有内容,因此总大小保持指定的大小,没有额外的填充或边框超出给定的宽度.

理解和使用 box-sizing:border-box 可以简化你的 CSS,让你的布局更可预测、更容易管理。如果您对此一无所知,我希望这个解释能够澄清问题。
您可以在 CodePen 上查看和试验本示例中使用的代码。
如果您喜欢这篇文章,请在 LinkedIn 和 Twitter 上与我联系!

以上是box-sizing: border-box 实际上有什么作用?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn