CSS撑满父元素空间

在网页开发中，经常会遇到需要使子元素充满父元素空间的情况。这在布局设计中是非常常见的需求，同时也是实现自适应布局的重要技巧之一。本文将介绍如何使用CSS来实现让子元素充满父元素空间的方法。

设置子元素宽高为100%

一种常见的方法是设置子元素的宽度和高度为100%。这样子元素就会撑满父元素的空间。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>子元素撑满父元素空间</title>
    <style>
        .parent {
            width: 400px;
            height: 200px;
            background-color: lightblue;
            position: relative;
        }

        .child {
            width: 100%;
            height: 100%;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">子元素</div>
    </div>
</body>
</html>

上面的代码中，.parent是父元素，宽度为400px，高度为200px，背景色为浅蓝色。.child是子元素，宽度和高度设置为100%，背景色为浅珊瑚色。通过设置子元素的宽高为100%，使其充满父元素的空间，达到了撑满的效果。

使用绝对定位实现子元素充满

另一种常见的方法是使用绝对定位。通过设置子元素的位置属性为绝对定位，并设置四个方向的值为0，就可以使子元素充满父元素的空间。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>子元素撑满父元素空间</title>
    <style>
        .parent {
            width: 400px;
            height: 200px;
            background-color: lightblue;
            position: relative;
        }

        .child {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">子元素</div>
    </div>
</body>
</html>

上面的代码中，.parent和 .child 的样式和上一个示例相同。不同之处在于，这次 .child 使用了绝对定位并将 top、right、bottom、left 四个方向的值都设置为0。这样就可以使子元素充满父元素的空间。需要特别注意的是，父元素要设置相对定位才能使绝对定位的子元素相对于其定位。

使用Flex布局实现子元素充满

Flex布局是CSS3新增的一种布局方式，通过在父元素上设置 display: flex，可以很方便地实现子元素充满父元素的空间。以下是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>子元素撑满父元素空间</title>
    <style>
        .parent {
            width: 400px;
            height: 200px;
            background-color: lightblue;
            display: flex;
        }

        .child {
            flex: 1;
            background-color: lightcoral;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">子元素</div>
    </div>
</body>
</html>

上面的代码中，.parent是父元素，宽度为400px，高度为200px，背景色为浅蓝色。通过设置 .parent 的 display 为 flex，使其成为一个 flex 容器。然后给 .child 设置 flex 属性为1，这样 .child 就会自动充满父元素的空间。使用Flex布局的方式可以简单快捷地实现子元素充满父元素的效果。