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

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

2017-12-31 1080

简介：
+关注继续查看

代码：

复制代码
<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，如需转载请自行联系原作者

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

前端开发
CSS学习 CSS div CSS案例 CSS span CSS div span
开发者社区 > 开发与运维 > 文章
云迁移中心
作者高分内容
更多
ES搜索排序，文档相关度评分介绍——Field-length norm 2945 使用UltraISO刻录自己的音乐CD步骤 3522 真正的上锁前，为何要调用preempt_disable()来关闭抢占的case【转】 2397 linux内核中打印栈回溯信息 - dump_stack()函数分析【转】 4203 css案例学习之用thead、tbody、tfoot实现漂亮的table布局 2821
相关文章
t75yjb52rsccc
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
+关注
桃子红了呐
文章
问答
视频
作者高分内容
更多
ES搜索排序，文档相关度评分介绍——Field-length norm 2945 使用UltraISO刻录自己的音乐CD步骤 3522 真正的上锁前，为何要调用preempt_disable()来关闭抢占的case【转】 2397 linux内核中打印栈回溯信息 - dump_stack()函数分析【转】 4203 css案例学习之用thead、tbody、tfoot实现漂亮的table布局 2821
文章排行榜
最热
最新
1 「开源人说」第五期 | KubeVela：一场向应用交付标准的“冲锋” 199279
2 一个业务前端关于成长的心路历程 64242
3 C语言 | 数据结构—约瑟夫环问题 58995
4 快速开发光伏电站数字孪生运维系统（一） 44683
5 使用 DataAnnotations（数据注解）实现模型的通用数据校验 43167
6 阿里云智能语音交互产品测评：基于语音识别、语音合成、自然语言理解等技术 41957
7 一文深度解读音视频行业技术发展历程 35748
8 Hive数据倾斜的原因以及常用解决方案 33200
9 高并发编程之阻塞队列 32762
10 Java的Stream操作详解 31673
11 Spring 事务【隔离级别与传播机制】 30516
12 性能优化之使用vue-worker插件（基于Web Worker）开启多线程运算提高效率 29515
13 计网之初识网络(理解网络传输的基本流程) 28031
14 Android体系课之--LeakCanary内存泄露检测原理解析 25947
15 零基础快速开发Vue图书管理系统—登录注册篇（一） 22692
16 IoT设备数据的存储、解析和价值挖掘实践 22661
17 【实战企业级Java二】渐进式理解Redis分布式锁 22540
18 IoT Studio 物联网可视化应用搭建开发实践 21328
19 虚拟数字人之《手语翻译官》的技术实践 19510
20 实现人机协同高稳定性，阿里云5G专网IoT方案入选工信部优秀解决方案 54136
1 OpenSearch上线实时热搜、个性化底纹功能 58
2 ChatGpt与EdgeGpt 129
3 JAVA中如何高效的实现SQL的like语法? 5843
4 RocketMQ x OpenTelemetry 分布式全链路追踪最佳实践 75
5 这才叫开箱即用！ 491
6 运维工程师工作时最常用的20个Linux命令有哪些？建议收藏 17678
7 玖章算术CEO叶正盛在杭州人工智能小镇AIGC论坛发表主题演讲 86
8 Linux基础IO【文件理解与操作】 16877
9 Flink 流批一体方案在数禾的实践 7444
10 超丰厚奖池｜天池达人积分榜，有你而不凡！ 187
11 今天出门你查老黄历了吗？包括万年历在内的超多免费可用 API 推荐（一） 103
12 关于几天前出的 MinIO 敏感信息泄露漏洞，分享两种扫描方法 219
13 五分钟！获得轻量级的云原生应用控制平面 169
14 域名资讯 - XYZ注册局域名报告-2023年2月 70
15 数据备份浅谈 145
16 ChatGPT软件技术栈解密 91
17 阿里云com和cn域名注册代金券免费领取 95
18 灵魂一问：一个Java文件的执行全部过程你确定都清楚吗？ 59
19 简要聊聊UNIX,MINIX,LINUX,BSD的区别与特质 27377
20 Flink Table Store 独立孵化启动 ，Apache Paimon 诞生 537
相关课程
更多
前端开发CSS基础
4160
21
去学习
零基础学前端HTML+CSS
8762
57
去学习
CSS 快速掌握
19103
49
去学习
HTML5 新特性教程
21053
15
去学习
HTML 入门与实战
31174
33
去学习
HTML基础入门学习
2437
21
去学习
推荐文章
参与OCR文档自学习产品评测，赢Airpods 2 参与云效代码管理Codeup评测，赢Redmi Watch 3 参与IoT小程序框架评测，赢CHERRY机械键盘 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
零基础CSS入门教程
立即下载
编程语言如何演化—— 以 JS 的 private 为例
立即下载
编程语言如何演化-以JS的private为例
立即下载
相关实验场景
更多
HTML及前端框架
1419
2.0小时
去实验
CSS实现千纸鹤样式
21
1.0小时
去实验
CSS实现指南针应用
88
1.0小时
去实验
CSS基础教程
107
1.0小时
去实验
JavaScript实现轮播图展示
148
1.0小时
去实验
JavaScript实现瀑布流布局
42
1.0小时
去实验