子盒子内的元素定位基准以及 overflow:hidden 的影响

1. CSS盒子模型

在CSS中，每个元素都是一个矩形盒子，由内容、内边距、边框和外边距四部分组成。盒子模型决定了元素在页面上的位置和大小。

2. 子盒子中的元素定位基准

子盒子中元素的定位基准是其父元素的内边距边缘。这意味着子元素的定位是相对于其父元素的内边距边缘，而不是父元素的边框或外边距边缘。

3. 百分比计算

在CSS中，可以使用百分比值来指定元素的宽、高、内外边距、偏移量等属性值。百分比值相对于包含块元素的宽度或高度进行计算。

4. overflow:hidden 属性

overflow:hidden 属性用于隐藏元素溢出的内容。当元素的内容超过其边界时，overflow:hidden 属性会将溢出内容隐藏起来。

5. overflow:hidden 属性对子盒子的影响

当父元素设置了 overflow:hidden 属性时，子元素的定位基准会发生变化。此时，子元素的定位基准是父元素的边框边缘，而不是父元素的内边距边缘。

6. 示例

为了更好地理解overflow:hidden 属性对子盒子的影响，我们来看一个示例。

<div id="parent">
  <div id="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus tincidunt. Donec sollicitudin molestie malesuada. Donec eget lacus eget nunc luctus tincidunt. Donec sollicitudin molestie malesuada.
  </div>
</div>

#parent {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

#child {
  width: 100%;
  height: 100%;
  background-color: red;
}

在上面的示例中，父元素设置了 overflow:hidden 属性。这意味着子元素的定位基准是父元素的边框边缘。因此，子元素的内容被限制在父元素的边框内，溢出的内容被隐藏起来。

7. 结论

综上所述，子盒子中元素的定位基准是其父元素的内边距边缘，但当父元素设置了 overflow:hidden 属性时，子元素的定位基准会发生变化，此时子元素的定位基准是父元素的边框边缘。