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

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

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

非常感谢!


无论您如何计算边框和边框的实际大小,您设置的box-sizing都不重要。 无论哪种方式都是一样的。

什么content-boxborder-box做的是控制一个元素的宽度和高度,使边框和内边距不被包含( content-box ),或者它们被包含在border-boxborder-boxheightwidth指定。

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

#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>
链接地址: http://www.djcxy.com/p/75595.html

上一篇: CSS percentual padding / margin in border

下一篇: Padding increasing the total size of a box element