CSS - 盒子模型宽度

Question

根据盒子模型，元素的总宽度=内容宽度+边距+填充+边框。

如果定义div元素，并添加width = 200，margin = 3px，border = 4px和padding = 1px。然后在使用$('div').width()查询JS代码时，它返回200而不是根据公式的宽度。

Answer 1

请检查width();规格。它返回没有边距，填充和边框的宽度。

如果您想要包含填充和边框，则必须使用.outerWidth()，如果您还要包含边距，则必须使用.outerWidth(true)。

希望这有帮助

Answer 2

尝试使用outerWidth( true )

的width内容

outerWidth( true )将返回元素的宽度，以及左右填充，边框和可选边距（以像素为单位）。

  

使用$（'div'）。width（），它返回200

这是例外结果。

如果您想根据公式获得宽度，则必须尝试使用​​outerWidth( true )

$('div').outerWidth( true )

Answer 3

.outerWidth(true);应按预期工作