很多刚入坑前端的同学一直不懂div和span两个无语义标签有什么区别。那么,有什么区别呢?
答案就是div是块状元素,span是内联元素。


那么,块状元素(block)和内联元素(inline)又有什么区别呢?
块状元素:
后面的元素会从另起一行开始
高度,行高以及顶、底边距都可控制
宽度是它所在容器的100%,或者自己设定一个宽度
内联元素:
和其它元素都在一行上,需要使用br标签进行换行
高度,行高以及顶、底边距不可改变
宽度就是它所容纳的子元素的宽度,不可改变


块状元素与内联元素的相互转换:通过css控制
块状元素转化为内联元素:css设置display:inline
内联元素转化为块状元素:css设置display:block

代码如下:





块状元素和内联元素的转换



我是span
我换行啦
我测试下



我是div

我不换行了

我测试下


结果如下:
一文读懂块状元素和内联元素_第1张图片


常见块状元素和内联元素如下:
块状元素:
 address - 地址
 center - 举中对齐块
 dir - 目录列表
 div - 常用块级元素,无语意
 dl - 定义列表
 fieldset - form控制组
 form - 交互表单
 h1~h6 - 标题
 hr - 水平分隔线
 menu - 菜单列表
 li - 列表
 ol - 有序列表
 ul - 无序列表
 p - 段落
 pre - 格式化文本
 table - 表格

内联元素:
 a - 锚点
 b - 粗体
 big - 大字体
 br - 换行
 code - 计算机代码
 em - 强调
 font - 字体设定
 i - 斜体
 img - 图片
 input - 输入框
 label - 表格标签
 small - 小字体文本
 span - 常用内联元素,无语义
 strong - 粗体强调
 sub - 下标
 sup - 上标
 textarea - 多行文本输入框