DIV和SPAN的区别

简介: 两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。  详解:1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解: 测试紧跟前面的"测试"显示这里会另起一行显示    2.块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化,如:  测试紧跟前面的"测试"显示这里会另起一行显示。

两者最明显的区别在于DIV是块元素,而SPAN是行内元素(也译作内嵌元素)。 

详解:1.所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行,测试一下下面的代码你会有更形象的理解:

测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div> 

 

2.块元素和行内元素也不是一成不变的,通过定义CSSdisplay属性值可以互相转化,如: 

测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示。

 

自己直接模拟一个:

 

<div>刘</div><div>宇</div>
<span>刘</span><span>刘</span>
<br />
<div style="display:inline;">宇</div>
<div style="display:inline;">宇</div>
<span style="display:block;">宇</span>
<span style="display:block;">宇</span>

相关文章
|
12天前
|
前端开发 JavaScript
Class 与 Style 绑定1
Class 与 Style 绑定1
|
5月前
div常用
div常用
|
7月前
|
机器学习/深度学习 人工智能 BI
B. Swaps<743,div2>
B. Swaps<743,div2>
53 0
|
12天前
|
前端开发 JavaScript
Class 与 Style 绑定2
Class 与 Style 绑定2
|
7月前
|
机器学习/深度学习 人工智能
B2. Wonderful Coloring - 2<734.div3>
B2. Wonderful Coloring - 2<734.div3>
31 1
|
9月前
|
JavaScript 前端开发 索引
|
12月前
|
前端开发 JavaScript
class与style绑定
class与style绑定
77 0
|
前端开发 开发者 容器
div 和 span 区别| 学习笔记
快速学习 div 和 span 区别。
75 0
div 和 span 区别| 学习笔记
|
前端开发 开发者 容器
DIV 和 SPAN 标签介绍| 学习笔记
快速学习 DIV 和 SPAN 标签介绍。
174 0
DIV 和 SPAN 标签介绍| 学习笔记
Mikasa #735-div2
题意:找到n ^ 1 … n ^ m中最小为出现的非负整数
74 0
Mikasa #735-div2

热门文章

最新文章