提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

css案例学习之div与span的区别

案例学习CSS 区别 div Span
2023-09-27 14:24:31 时间

代码：

<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>

说明：div默认占据一行，两边有所空隙。可以设置宽度、高度，即使是设置宽度了，div还是占据一行，只是盒子的内容空间小了。

span是行内元素，没有宽度和高度的概念。放在一个单独的div中，才会独自占据一行位置，这个位置也是div争取回来的。

相关文章