您的位置：首页 > Web前端 > CSS

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

2015-11-23 09:50 671 查看


代码：

<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争取回来的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航