关于css边框、边距、填充和宽度
玩css边框、边距、填充和宽度时，我遇到了一个额外的像素 我知道元素的总宽度和高度是其宽度、边框、边距和填充的总和 如果你看这个，一切似乎都正常。单击按钮时，将一些像素从边框移动到边距将创建一个伪动画 现在让我们在中设置一个固定的宽度和高度（从：活动中删除宽度和高度）：在Firefox和Chrome中，有一个额外的高度和一个额外的宽度像素移动所有相邻元素。在Opera中，有一个额外的宽度和两个额外的高度像素。他们来自哪里 但在这里，将像素从边界移动到填充似乎可以解决所有问题，但伪动画不同 在前两个小提琴中，边界被缩小到接近内容；在最后一个例子中，边界被展开的内容缩小关于css边框、边距、填充和宽度,css,width,border,margin,padding,Css,Width,Border,Margin,Padding,玩css边框、边距、填充和宽度时，我遇到了一个额外的像素 我知道元素的总宽度和高度是其宽度、边框、边距和填充的总和 如果你看这个，一切似乎都正常。单击按钮时，将一些像素从边框移动到边距将创建一个伪动画 现在让我们在中设置一个固定的宽度和高度（从：活动中删除宽度和高度）：在Firefox和Chrome中，有一个额外的高度和一个额外的宽度像素移动所有相邻元素。在Opera中，有一个额外的宽度和两个额外的高度像素。他们来自哪里 但在这里，将像素从边界移动到填充似乎可以解决所有问题，但伪动画不同 在前两
为什么会这样？我遗漏了什么？出现问题的原因是，当您固定宽度时，例如在100px，带有边框的长方体的宽度将为100px（由于长方体大小属性），因此边距的增加不会通过长方体的缩小来补偿，而当您未设置其宽度时，就会发生这种情况 使用固定宽度，并将框大小设置为边框框，则不应修改边距属性以避免另一个框移动 当然，最简单的解决方法是在内容框设置框大小：
有关css框大小属性的更多信息，请转到。这是我最近注意到的一个问题： W3C引入的默认boxmodel是
内容框但是，最近我注意到浏览器有UA样式，它们声明
框大小：border box框大小：内容框