开发者社区> 桃子红了呐> 正文

css案例学习之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>
复制代码

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

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



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/4987496.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS3第三课 浮动内容的介绍。本博客一案例为主。让读者在案例中学会对知识点的总结与介绍。
CSS3第三课 浮动内容的介绍。本博客一案例为主。让读者在案例中学会对知识点的总结与介绍。
19 0
前端知识学习案例10-tailWind Css+vite2.0-部署项目
前端知识学习案例10-tailWind Css+vite2.0-部署项目
13 0
前端知识学习案例8-tailWind Css+vite2.0-前后端连接
前端知识学习案例8-tailWind Css+vite2.0-前后端连接
14 0
前端知识学习案例7-tailWind Css+vite2.0-notionApi之2
前端知识学习案例7-tailWind Css+vite2.0-notionApi之2
13 0
前端知识学习案例5-tailWind Css+vite2.0-事件交互
前端知识学习案例5-tailWind Css+vite2.0-事件交互
18 0
前端知识学习案例2-tailWind Css+vite2.0-创建项目2
前端知识学习案例2-tailWind Css+vite2.0-创建项目2
16 0
前端知识学习案例3-tailWind Css+vite2.0-编写页面
前端知识学习案例3-tailWind Css+vite2.0-编写页面
12 0
前端知识学习案例5-开发企业网站5-编写导航css样式
前端知识学习案例5-开发企业网站5-编写导航css样式
14 0
前端知识学习案例9-tailWind Css+vite2.0-项目优化
前端知识学习案例9-tailWind Css+vite2.0-项目优化
10 0
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
100 0
+关注
桃子红了呐
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
编程语言如何演化-以JS的private为例
立即下载