使用absolute定位的div盒子端点无法均匀对齐是什么原因？

常见的规则误解点 #

• 盒模型规则理解偏差
  默认box-sizing值为content-box，此时你给元素设置的width/height仅包含内容区域，border、padding会额外叠加在元素尺寸外。如果蓝色、黄色两个盒子的border、padding设置不一致，就算给了相同的定位偏移值和内容宽高，实际渲染的总宽高也会不同，最终出现边缘错位。如果需要让width/height包含border和padding，可统一设置box-sizing: border-box。
• 定位上下文规则混淆
  position: absolute的元素的定位偏移是相对于*最近的position值不为static的父元素（即定位上下文）*计算的。如果两个盒子的定位父级不是同一个元素，或是父级本身设置了border、padding，就算你给两个盒子设置了相同的left/right/top/bottom值，最终的实际渲染位置也会出现偏差。
• 亚像素渲染差异
  如果定位偏移值、元素宽高设置了小数，或是对元素使用了transform缩放、平移等属性，不同浏览器的亚像素渲染逻辑有差异，也可能出现1px以内的边缘错位。
• 默认样式干扰
  部分浏览器会给部分元素附加默认的margin、padding，如果你没有做样式重置，默认样式也可能导致定位偏差。

内容的提问来源于stack exchange，提问作者Lagoon