DIV和SPAN的共同和区别

最新推荐文章于 2022-09-01 10:13:36 发布

whyabc

最新推荐文章于 2022-09-01 10:13:36 发布

阅读量968

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/yanzhibo/article/details/18511937

版权

css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

共同：

都是无意义的标签元素（标签本身没有任何含义）

主要用于应用样式表，通过CSS来设置样式。

区别：

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

块元素：是以另起一行开始渲染的元素，默认换行。

行内元素：不需另起一行。默认不换行。

测试一下下面的代码你会有更形象的理解：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>DIV+CSS</title>
	</head>
	<body>
		<span>我不会换行</span>
		<span>我不会换行</span>
		<div>我会换行</div>
		<div>我会换行</div>
	</body>
</html>

也就是说换行的都是块级元素，如<p>
      不换行的都是内联元素。如<font>
   块级元素可以设置宽高，
   内联元素设置宽高后无任何作用。

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>DIV+CSS</title>
		
		<style type="text/css">
			span{
				height:300px;
				width:300px;
				background:yellow;
			}
			.div1{
				height:300px;
				width:300px;
				background:red;
			}
			#div1{
				height:300px;
				width:300px;
				background:blue;
			}
		</style>
	</head>
	<body>
		<span>我设置高度不起作用</span>
		<span>我不会换行</span>
		<div class="div1">我可以设置高度</div>
		<div id="div1">我会换行</div>
	</body>
</html>

块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：

测试<div style="display:inline">紧跟前面的"测试"显示</div>

<span style="display:block">这里会另起一行显示</span>

whyabc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV和SPAN的共同和区别

共同：都是无意义的标签元素（标签本身没有任何含义）主要用于应用样式表，通过CSS来设置样式。区别：两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌/内联元素)。块元素：是以另起一行开始渲染的元素，默认换行。行内元素：不需另起一行。默认不换行。测试一下下面的代码你会有更形象的理解：测试紧跟前面的"测试"显示这里会另起一行
复制链接

扫一扫