CSS元素类型的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box1{
				width:300px;
				height:100px;
				background: pink;
				display:inline;/*将块元素转换为内联元素*/
				margin:30px;
			}
			.spa{
				background:red;
				width:300px;
				height:100px;
				margin:30px;
				display:block;/*将元素转换为块元素*/
			}
			a{
				width:100px;
				height:100px;
				background: red;
				margin:10px;
				display:inline-block;/*将元素转换为内联块元素*/
			}
			
			.box2{
				width: 300px;
				height: 200px;
				background: pink;
				margin: 100px;
			}
			.box2 .txt{
				width: 100px;
				height: 80px;
				background: skyblue;
				display:none;/*把元素藏起来*/
			}
			.box2:hover .txt{
				display:block;/*显示 且是块状元素类型*/
			}
			
		</style>
	</head>
	<body>
		<!--
			块状元素	block
			内联元素	inline
			内联块元素	inline-block (集合了块元素和内联元素的特征)
			
			元素类型的转换:   display:;
				display:inline; 将元素转换为内联元素
				display:block;	将元素转换为块元素(显示)
				display:inline-block;	将元素转换为内联块元素
				
				display:none;	隐藏
				
				display:list-item; 将元素转换为列表类型
				
				
		-->
		<div class="box1">div默认就是一个块元素,被转换成了内联元素</div>
		<span class="spa">span默认是内联元素,将被转换为快转元素</span>
		div默认就是一个块元素
		
		<a href="" class="btn">元素转换1</a>
		<a href="" class="btn">元素转换2</a>
		<a href="" class="btn">元素转换3</a>
		<a href="" class="btn">元素转换4</a>
		
		<div class="box2">
			<a href="" class="txt">fdafasd</a>
		</div>
	</body>
</html>
weixin_46421045
发布了40 篇原创文章 · 获赞 1 · 访问量 1146
私信关注
CSS元素类型的转换

猜你喜欢
