CSS - 盒子模型宽度

Posted 2023-02-22

【中文标题】CSS - 盒子模型宽度

【英文标题】：CSS - box model width [duplicate]

【发布时间】：2014-11-16 09:18:33

【问题描述】：

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

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

【问题讨论】：

jQuery 的.width() 方法将始终返回内容宽度。请改用.outerWidth()。

见：What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery

【参考方案1】：

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

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

希望对你有帮助

【参考方案2】：

尝试使用outerWidth( true ) insted of width

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

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

这是例外结果。

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

$('div').outerWidth( true )

【参考方案3】：

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