Question

据我所知，使用box-sizing:content-box，当以百分比设置元素的填充和边距时，这些将是实际内容区域宽度的百分比。因此，300px宽图像的50％边距与其填充无任何关系，将产生150px宽的边距，因此实际尺寸为450px宽度（+填充）。

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

非常感谢！

Answer 1

关于如何计算边距和边框的实际尺寸，您设置box-sizing的内容并不重要。这两种方式都是一样的。

content-box或border-box所做的是控制元素的宽度和高度，以便不包含边框和填充（content-box）或包含它们（{{1} }）由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;
}

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

1 个答案: