背景简介
jQuery UI 是一个基于 jQuery 的用户界面库，提供了一系列的组件和交互效果。其中 Resize 组件是用于实现 DOM 元素的拖拽缩放功能的。
然而，在使用 Resize 组件时，如果元素的 box-sizing 属性设置为 border-box，会出现无法正常调整大小的 Bug。这是因为在 border-box 盒模型下，元素的宽高已经包括了边框和内边距，但 Resize 组件却只能改变元素内容的宽高，导致元素的边框和内边距发生了错位。
本文将分析这一问题的原因，并给出解决方案和示例代码。
问题分析
对于普通盒模型（content-box），元素的宽度由内容区域的宽度、边框宽度和内边距宽度三部分构成。而对于 border-box 盒模型，元素的宽度已经包括了边框和内边距，因此实际上只有内容区域的宽度会随着元素的缩放而改变。
Resize 组件作为一个通用的组件，不能预知具体的盒模型类型，所以实现时只考虑了默认盒模型下的情况，即 content-box 盒模型。因此，在使用 Resize 组件时，如果元素的盒模型设置为 border-box，就会发生上述 Bug。
解决方案
解决这一问题的关键在于计算出元素的边框和内边距所占据的宽度和高度。我们可以通过 jQuery 的 outerWidth 和 outerHeight 方法来获取元素包括边框和内边距的宽度和高度，然后减去内容区域的宽度和高度，就能得到边框和内边距所占据的宽度和高度了。
具体实现如下：
-- -------------------- ---- -------
---------------------------- --------------- -
------ ---------- -
--- ------- - -----------------------------
------- - ----------------
----------- - -----------------
-----
------ -------
-- ------- ----------------
-- --------------------- -- ------------ -- ---------- -- ----------- -- --------- -
-------
-
-- ------------------
---- - ------------------------- --- ------------ - - -
------------------------------
----- - ------------------ - -----------
------ - ------------------- - ------------
-- - ------- ------------------
---------------- - -
------ ---------------------------- - ------
------- ----------------------------- - ------
--
-- ------
-- --------------------------------------- --- -- -- --------------------------------------- --- --- -
------------------ - ----- - -----------------------
------------------- - ------ - ------------------------
-
--
------- --------------- --- -
--- ------- - -----------------------------
------- - ----------------
----------- - -----------------
-----
---------------- - --------------------
------------ - ----------------
----- - ------- - -------------
-- ------- ----------------
-- --------------------- -- ------------ -- ---------- -- ----------- -- --------- -
-------
-
-- ------------------
---- - ------------------------- --- ------------ - - -
---------------------------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------