css案例学习之div与span的区别-优快云博客

本文通过HTML代码实例展示了如何使用div和span元素进行页面布局，并调整样式，包括字体、颜色、背景、对齐方式及块元素的宽度和高度。

代码：

<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
div.widthstyle{
    font-size:18px;                        /* 字号大小 */
    font-weight:bold;                    /* 字体粗细 */
    font-family:Arial;                    /* 字体 */
    color:#FFFF00;                        /* 颜色 */
    background-color:#0000FF;            /* 背景颜色 */
    text-align:center;                    /* 对齐方式 */
    /*width:300px;*/                        /* 块宽度 默认宽度为一行，两边有点距离*/
    height:100px;                        /* 块高度 */
    margin-top: 10px;
}

span{
    font-size:18px;                        /* 字号大小 */
    font-weight:bold;                    /* 字体粗细 */
    font-family:Arial;                    /* 字体 */
    color:#FFFFFF;                        /* 颜色 */
    background-color:#0000FF;            /* 背景颜色 */
    text-align:center;                    /* 对齐方式 */
    width:300px;                        /* 块宽度 span没有宽度的概念 */
    height:100px;                        /* 块高度 span没有高度的概念*/
    padding-left:10px;
    margin-left:10px;
}
</style>
</head>
<body>
    <div class="widthstyle">
    这是一个div标记1
    </div>
    <div class="widthstyle">
    这是一个div标记2
    </div>
    <div class="widthstyle">
    这是一个div标记3
    </div>
    <span>
    这是一个span标记1
    </span>
    <span>
    这是一个span标记2
    </span>
    <span>
    这是一个span标记3
    </span>
    
    <div>
    <span>
    这是一个div中的span标记1
    </span>
    <span>
    这是一个div中的span标记2
    </span>
    <span>
    这是一个div中的span标记3
    </span>
    </div>

    <div>
    <span>
    这是一个单独div中的span标记1
    </span>
    </div>
    <div>
    <span>
    这是一个单独div中的span标记2
    </span>
    </div>
    <div>
    <span>
    这是一个单独div中的span标记3
    </span>
    </div>
</body>
</html>