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

Question

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

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

非常感谢!

Answer 1

关于如何计算边距和边框的实际大小，将 box-sizing 设置为什么并不重要。这两种方式都是一样的。

content-box 或 border-box 所做的是控制元素的宽度和高度，以便不包括边框和填充(content- box) 或者它们包含在 height 和 width 指定的整体尺寸中 (border-box)。

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

#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>