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