div与span的区别如何转化_1、div标记与span标记有什么区别?它们之间可以转换吗?举例说明。-CSDN博客

本文链接：https://blog.csdn.net/m0_37149062/article/details/131899506

本博文源于笔者在实现组框，在已经有li的情况下，如何用其他元素实现这个组框，第一时间考虑了div，但是div的使用会动一些不必要的代码，所以就用了span去模拟div

1、两者功能上

div是一个块级元素，用于定义一个独立的区域活容器，通常用来组织和布局页面的内容，span是一个内联元素，用于在文本中标记活包裹一小段文本或行内元素。

2、强制换行或占据整行

div元素在默认情况下会占据一整行，宽度为100%，而span元素不会强制换行，宽度由内容决定

3、div与span地转化

div变成span将display属性写为inlne
span转为div将display属性写为block

实战案例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
			integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
		<meta charset="utf-8">
		<title></title>
		<style>
			.bordered {
			 /* /* display: block; */ */
			  border: 1px solid black;
			
			}
			
		</style>

	</head>
	<body>
		<ul>
			<span class="bordered" >
				<li >1</li>
				<li >2</li>
			</span>
			  
			  <li>3</li>
			  <li>4</li>
			  <li>5</li>
		</ul>
	</body>

</html>

我想让其变为两个li的边框，只需要将display属性设置即可。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
			integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
		<meta charset="utf-8">
		<title></title>
		<style>
			.bordered {
			 display: block;
			  border: 1px solid black;
			
			}
			
		</style>

	</head>
	<body>
		<ul>
			<span class="bordered" >
				<li >1</li>
				<li >2</li>
			</span>
			  
			  <li>3</li>
			  <li>4</li>
			  <li>5</li>
		</ul>
	</body>

</html>