div和span的区别

时间:2022-10-31 04:07:18

<div>是一个块级元素,我们可以把它比喻成盒子,它没什么实际语义能用到很多地方,独占一行不能和其它元素在一行,它还能把<div>和<span>”装在盒子里”,主要用来组合段落和布局。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div</title>
<style>
div.b{width:500px}
div.b span{color:blue}
div.b div{float: right}
</style> </head>
<body>
<div class="b">
<p>我是一个<span>被span包含的段落</span></p>
<div>
<p>我是在div里的div</p>
</div>
</div>
</body>
</html>
*h1是块级元素的

div和span的区别

<span>是行内元素,我们可以把它比喻成袋子,它也没有实际语义也能用到很多地方,如果没有样式它在视觉上和<p>一样,能和其它元素在一行,它的内容有多大宽度就有多宽,不能再里面添加<div>,它能把段落中的某一段”装起来”定义样式,能呈现很好的视觉效果。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>span</title>
<style>
div.a span{color:red}
</style>
</head>
<body>
<div class="a">
<ol>
<li><span>2015.11.20</span>财务</li>
<li>2015.11.20<span>人事</span></li>
<li>2015.11.20销售</li>
</ol>
<ul>
<li>我</li>
<li><span>是</span></li>
<li>谁</li>
</ul>
</div>
</body>
</html>
*ol、li、ul是块级元素

div和span的区别