CSS - 盒子模型宽度答案

【问题标题】：CSS - box model width [duplicate]CSS - 盒子模型宽度
【发布时间】：2014-11-16 09:18:33
【问题描述】：

根据box模型，元素的总宽度=内容宽度+边距+内边距+边框。

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

【问题讨论】：

【解决方案1】：

请查看width(); 规格。它返回没有边距、内边距和边框的宽度。

如果你想包括内边距和边框，你必须使用.outerWidth()，如果你也想包括边距，你必须使用.outerWidth(true)。

希望对你有帮助

【讨论】：

【解决方案2】：

尝试使用outerWidth( true ) insted of width

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

使用$('div').width()，返回200

这是例外结果。

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

$('div').outerWidth( true )

【讨论】：

【解决方案3】：

.outerWidth(true); 应该可以正常工作

【讨论】：