div和span的区别以及行元素和块元素的转换?
相同点:
div和span都可以将HTML元素组合起来,类似一个盒子将里面的内容当作一个整体来处理,从而实现整体作用效果,提高效率。
不同点:
div是块级元素,是可用于组合其他HTML元素的容器,其常用的用途是文档布局,主要用于页面的排版。
span是内联元素(行内元素),主要用于容纳文字。span只是把内容定义成一个整体进行操作,不影响布局和显示,而且span没有什么实用特性,它的作用便是围绕HTML代码中的其他元素,为其指定样式。
注意点:
块元素和行内元素不是不可改变的,只要给块元素定义display:inline,块元素便成为了内嵌元素,给内嵌元素定义display:block就成为了块元素。
举例说明:
①div实例
<!DOCTYPE html>
<html>
<head>
<style>
.text {
background-color:black;
color:white;
margin:10px;
padding:10px;
}
</style>
</head>
<body>
<div class="text">
<h2>小学</h2>
<p>小学生</p>
</div>
<div class="text">
<h2>中学</h2>
<p>中学生</p>
</div>
<div class="text">
<h2>大学</h2>
<p>大学生</p>
</div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/211297647b1df453baa70b2d38594cae.png)
②span实例
<!DOCTYPE html>
<html>
<head>
<style>
span.blue {
color:blue;
}
</style>
</head>
<body>
<h1>进行<span class="blue">实例</span>测试</h1>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/a047119f7e49ac73b3215531f3a71bb0.png)
③行内元素块元素变换实例
<!DOCTYPE html>
<html>
<body>
<h1>测试<span style="display:block;color:blue;">实例</span>测试</h1>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/e48dfebd964670a254896d1d6d200a99.png)