边框中的 CSS 百分比填充/边距

Question

据我了解，使用box-sizing:content-box 以百分比设置元素的填充和边距时，这些将是实际内容区域宽度的百分比。因此，300px 宽图像的 50% 边距，与其填充没有任何关系，将创建 150px 宽边距，因此实际大小为 450px 宽度（+填充）。

现在，当我使用box-sizing:border-box 时，宽度定义为内容+填充+边框。如果我使用百分比在边框框中设置元素的填充，它是否会引用这种不同的宽度定义，从而引用自身？如果不是，它仅指内容的宽度，在这种情况下，内容宽度本身也取决于填充和边框的宽度（内容宽度=（边框框宽度）-边框填充），因此在padding 将引用较小的内容，从而使填充本身再次变小。我理解对了吗？这似乎在这两种情况下填充都会以我自己为基础。我错过了什么？浏览器以什么顺序计算百分比，基于什么（仅内容或实际宽度）？

非常感谢！

Answer 1

您将box-sizing 设置为什么与如何计算边距和边框的实际大小无关。无论哪种方式都是一样的。

content-box 或 border-box 所做的是控制元素的宽度和高度，以便在由height 和 width。

此外，边框的宽度不能设置为百分比，并且填充基于元素的宽度，而不是内容。

#one {
  box-sizing:content-box; /* default */
  width:100px;
  height:100px;
  padding:10%; /* padding % is a percentage of the element's width */
  border:1px solid red;
  border:10% solid black;  /* Borders can't be set to percentages */
  background:yellow;
  float:left;
}

#two {
  box-sizing:border-box; /* default */
  width:100px;
  height:100px;
  padding:10%; /* padding % is a percentage of the element's width */
  border:1px solid red;
  border:10% solid black;  /* Borders can't be set to percentages */
  background:blue;
  float:left;
}

<div id="one"></div>
<div id="two"></div>