layout treechrome浏览器 layout tree, 构建dom树， layoutReact，client

对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常

LayoutRect的位置是从它本身的边到容器的边的距离，因此它的距离/位置包含了margin值和left/top的位移偏差。LayoutRect记录了一个盒子的位置和大小

clientWidth是除去border和scrollbar的宽度

LayoutUnit LayoutBox::clientWidth() const {
  return m_frameRect.width() - borderLeft() - borderRight() -
         verticalScrollbarWidth();
}

offsetWidth是frameRect的宽度——算上border和scrollbar：

LayoutUnit offsetWidth() const override { return m_frameRect.width(); }
LayoutUnit offsetHeight() const override { return m_frameRect.height(); }

计算left值时，会先取父元素的border-left和padding-left作为起始位置，然后再加上它自己的margin-left就得到它的x/left值