div父元素如何自动适配尺寸？未设宽高的父/兄弟元素为何有对应尺寸

你提到的两个尺寸问题本质上都属于块级元素的默认布局规则和transform特性的范畴，具体原因如下：

1. 红色父容器.box1的尺寸来源 #

• 宽度：div属于块级元素，未显式设置宽度时默认占满父容器的可用内容宽度。此处.box1的父元素是body，body默认宽度与视口宽度一致，因此.box1的宽度等于当前页面的视口宽度。
• 高度：未显式设置高度的块级元素，高度由内部正常文档流中的内容高度撑开。子元素.box2属于正常流入文档流的元素，高度为200px，因此.box1的高度刚好等于200px。

你看到的红色区域就是.box1宽度超出.box2（200px）的左右留白部分，高度与.box2完全一致。

2. 棕色容器.container的尺寸来源 #

• 宽度：和.box1同理，未设置宽度的块级元素默认撑满父容器（body）可用宽度，因此.container宽度等于当前视口宽度。
• 高度：同样由内部正常文档流的子元素占位高度决定，这里需要注意transform属性的核心特性：transform的偏移/缩放等效果仅修改元素的视觉渲染位置，完全不会改变元素在正常文档流中的原始占位尺寸和位置，因此：
  • 黄色.child1在文档流中的原始占位仍为160px*160px，translate(100px,100px)仅让它视觉上偏移，不影响占位
  • 绿色.child2在文档流中的原始占位仍为300px*300px，translateX(100px)仅修改视觉位置，不影响占位
  • 两个子元素都是块级元素，正常文档流中上下排列无重叠，因此总占位高度为160px + 300px = 460px，也就是.container的最终高度。

子元素视觉偏移后超出棕色容器的部分属于渲染溢出，不会对容器本身的尺寸产生任何影响。

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