开发者学堂课程【零基础学前端 HTML+CSS ：div 和 span 区别】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/398/detail/5138
div 和 span 区别
内容介绍
一、块元素概念
二、块元素与内联元素区别
三、举例
四、总结
一、块元素概念
块元素又名块级元素(block element)和其对应的是内联元素(inline element)，都是 html 规范中的概念。
常见块元素举例：
1. address -地址
2. blockquote -块引用
3. center -举中对齐块
4. dir-目录列表
5. div -常用块级容易,也是 CSS layout 的主要标签
6. dl-定义列表
7. fieldset - form 控制组
8. form -交互表单
9. h1-大标题
10. h2-副标题
11. h3-3级标题
12. h4 - 4级标题
13. h5 - 5级标题
14. h6 - 6级标题
15. hr – 水平分隔线 写一个水平线则会自动换行//写一个水平线就换一行，水平线不可能沿着右边一直走。
二、块元素与内联元素区别
1.block 元素的特点
（1）总是在新行上开始;
（2）高度,行高以及外边距和内边距都可控制;
（3）宽度缺省是它的容器的100% ,除非设定一个宽度；
（4）它可以容纳内联元素和其他块元素，可以嵌套。
2. inline 内联元素的特点
（1）和其他元素都在一行上；
（2）高,行高及外边距和内边距不可改变；
（3）宽度就是它的文字或图片的宽度,不可改变，span 的标签是不可缩的，里面有多大就自动缩成这个大小；
（4）内联元素只能容纳文本或者其他内联元素；
注：在一般情况下，做布局用块元素 div。而在一行的内容可以用<SPAN>。
三、举例
div 标签是块级元素，每个 div 标签都会从新行开始显示，占据一行；div 标签内可以添加其他的标签元素（行内元素、块级元素都行）。
1.例子：
在设计时将a、b、c写在一行上：
<div>a</div><div>b</div><div>c</div>
//虽然在设计的时候将三个 div 写在一行上，但是点开窗口可以看到是垂直排列的，这说明 div 是一个块元素，在布局时就是用的 div 块元素进行布局，它的宽高都可以进行修改。span 标签就是一个内联行元素，块元素和行元素之间可以相互转换，可以把一个块转换为一行，也可以把一行转换为一个块，而 span 标签是行内元素，会在一行显示；span 标签内只能添加行内元素的标签或文本。
效果图：
2.例子
<h1>标题1</h1>
<h2>标题2</h2>
回到窗口会发现h1,h2自动换行，说明它本身为块元素。
四、总结
块元素与行元素的性质不一样，使用块元素和行元素是有约定的，只能在规定的地方使用。一般情况，做布局用块元素 div，如：abc 456(在一行的内容可以用<SPAN>)。
