div+css

作者：淡情发布日期:2026-03-28 浏览:112

<!DOCTYPE html>
<html>
<head>
    <title>Div + CSS 示例</title>
    <style>
        /* 定义一个样式类，用于设置 div 的样式 */
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            border: 2px solid blue;
            margin: 20px;
            padding: 10px;
            text-align: center;
            line-height: 200px; /* 使文本垂直居中 */
        }
    </style>
</head>
<body>
    <!-- 使用 div 元素，并应用上面定义的样式 -->
    <div class="box">
        这是一个使用 div 和 css 的示例。
    </div>
</body>
</html>

解释说明：

HTML 部分:
- <div> 标签用于创建一个块级元素，可以用来包含其他 HTML 元素。
- class="box" 表示这个 div 元素将应用名为 box 的 CSS 类。
CSS 部分:
- .box 是一个 CSS 类选择器，定义了该类的所有样式。
- width 和 height 设置了 div 的宽度和高度。
- background-color 设置了背景颜色。
- border 设置了边框的样式、宽度和颜色。
- margin 设置了外边距，即 div 与其他元素之间的间距。
- padding 设置了内边距，即内容与 div 边缘之间的间距。
- text-align 设置了文本的水平对齐方式。
- line-height 设置了行高，这里用于使文本在 div 中垂直居中。

上一篇：css 渐变背景

下一篇：css 文字上下居中