作者：Kluter | 来源：互联网 | 2023-05-19 09:08
考虑这段代码
div {
box-sizing: border-box;
width: 0;
height: 0;
max-width: 0;
max-height: 0;
border: 1px solid gray;
padding: 12px;
overflow: hidden;
}
Hi
据我所见过的一切阅读,理解和使用的有关box-sizing: border-box;这应该显示什么,因为宽度和高度都是零和填充/边境零宽度和高度的内部.
然而,我们看到的是一个26x26的盒子((12个填充+ 1个边框)*2).是什么赋予了？为什么border-box不在这里工作？
1> Oriol..：
根据规范,
通过从指定的宽度
和高度属性中减去各边的边框和填充宽度来计算内容宽度和高度.由于内容宽度和高度不能为负([CSS21],第10.2节),因此该计算为0.
因此,您的元素有效地具有高度和宽度为0.但是由于填充和边框,您会看到它更大.
那并不能真正解释这里发生的事情。那么高度和宽度应该为零吗？
京公网安备 11010802041100号