javascript - 使用纯JS计算布局

Question

我可以用一个对象来表示具有样式的页面元素吗:

[{
   id: "widget-1",
   display: "block",
   float: "left",
   width: 100
}, {
   id: "widget-2",
   display: "block",
   float: "right",
   width: 200
}]

如何通过这些算法在不使用浏览器 DOM 的情况下计算这些元素位置的坐标和大小 http://taligarsiel.com/Projects/howbrowserswork1.htm#layout ？这样我看到的结果类似于:

[{
   "id": "widget-1",
   "width": 200,
   "height": 20,
   "top": 0,
   "left": 0,
   "right": 200,
   "bottom": 0,
}, {
   "id": "widget-2",
   "width": 200,
   "height": 20,
   "top": 0,
   "left": 200,
   "right": 0,
   "bottom": 0,
}]

有这个库吗？我需要在浏览器中对此进行快速计算，因此 javascript 实现会很有用。

我看到我们有 https://github.com/facebook/css-layout ，但仅支持“flex-box”布局。

Answer 1

虽然您想从头开始构建 CSS Box Model，但它“非常简单” .连this entry point在系列中可能会有帮助