Style bottom 属性

在 Web 开发中，我们经常会用到 CSS 来控制页面元素的样式。其中一个常用的属性就是 bottom 属性，它可以控制元素相对于其包含块（父元素）底部的位置。在本文中，我将详细介绍 bottom 属性的用法以及一些示例代码。

语法

bottom 属性的语法如下：

.element {
    position: absolute;
    bottom: 20px;
}

在上面的代码中，我们首先将元素的 position 属性设置为 absolute，这样元素就会脱离文档流，然后我们通过 bottom 属性来控制元素距离包含块底部的距离。在这个例子中，元素距离包含块底部的距禿是 20 像素。

示例

示例 1：将元素固定在页面底部

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <style>
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <div class="content">
        <p>这是页面内容</p>
    </div>
    <div class="footer">
        版权所有 © 2021
    </div>
</body>
</html>

在这个示例中，我们将 .footer 元素固定在页面底部，无论页面内容有多少，.footer 元素都会始终显示在底部。

示例 2：创建一个浮动按钮

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <style>
        .btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="btn">点击我</button>
</body>
</html>

在这个示例中，我们创建了一个浮动按钮，通过设置 bottom 和 right 属性，让按钮始终显示在页面的右下角。

结论

通过本文的介绍，你应该对 bottom 属性有了更深入的了解。它可以帮助我们控制页面元素在垂直方向上的位置，为我们的页面布局提供更多的灵活性。希望本文对你有所帮助！