边框中的CSS百分比填充/边距
据我的理解，使用box-sizing:content-box ，当以百分比设置元素的填充和边距时，这些将是实际内容区域宽度的百分比。 因此，300px宽的图像的50％边距与其填充没有任何关系，会创建150px的宽边距，因此实际尺寸为450px宽度（+填充）。
现在，当我使用box-sizing:border-box ，width被定义为content + padding + border。 如果我使用百分比在边框中设置我的元素的填充，它是否会引用此宽度的不同定义，因此是指它自己？ 如果不是，并且它仅指内容的宽度，则在这种情况下，内容宽度本身也取决于填充和边框的宽度（内容宽度=（边框宽度） - 边距填充），因此较高的百分比填充将指较小的内容，使填充本身再次变小。 我理解这个权利吗？ 这似乎在两种情况下，填充都会将自身对准我自己。 我错过了什么？ 浏览器以什么顺序（仅限内容或实际宽度）计算百分比？
非常感谢！
无论您如何计算边框和边框的实际大小，您设置的box-sizing都不重要。 无论哪种方式都是一样的。
什么content-box或border-box做的是控制一个元素的宽度和高度，使边框和内边距不被包含（ content-box ），或者它们被包含在border-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>