CSS box-sizing: 如何让子元素充满父元素空间

可以使用 CSS 的 box-sizing 属性来实现子元素充满父元素空间，而不超出父元素边框。

默认情况下，元素的 box-sizing 属性值为 content-box，这意味着元素的宽度和高度只包括内容的尺寸，不包括 padding 和 border 的尺寸。如果将 box-sizing 属性值设为 border-box，则元素的宽度和高度包括内容、padding 和 border 的尺寸，这样就可以避免父元素被占据的空间问题。

例如：

.parent {
  width: 500px;
  height: 500px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box;
}

.child {
  width: 100%;
  height: 100%;
}

在上面的例子中，父元素的宽度和高度被设置为 500px，并且有 20px 的 padding 和 2px 的边框。由于父元素的 box-sizing 属性值为 border-box，所以子元素的宽度和高度可以设置为 100%，并且不会超出父元素的边框范围。