div css

作者：飞吻狂魔发布日期:2026-06-16 浏览:52

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义一个div的样式 */
        .box {
            width: 200px; /* 设置宽度 */
            height: 200px; /* 设置高度 */
            background-color: lightblue; /* 设置背景颜色 */
            border: 2px solid blue; /* 设置边框 */
            margin: 20px; /* 设置外边距 */
            padding: 15px; /* 设置内边距 */
            text-align: center; /* 文本居中对齐 */
            line-height: 200px; /* 垂直居中对齐文本 */
        }
    </style>
</head>
<body>

<div class="box">
    这是一个带有CSS样式的div
</div>

</body>
</html>

解释说明：

width 和 height 分别设置 div 的宽度和高度。
background-color 设置 div 的背景颜色为浅蓝色。
border 设置 div 的边框为2像素宽的蓝色实线。
margin 设置 div 外部的空白区域，使得 div 与其他元素之间有一定的间距。
padding 设置 div 内部内容与边框之间的间距。
text-align: center 使文本在水平方向上居中对齐。
line-height: 200px 使文本在垂直方向上居中对齐。

上一篇：css 一行省略号

下一篇：css页面居中