元素类型的转换

最新推荐文章于 2023-03-22 19:52:59 发布

Stirve unremitting

最新推荐文章于 2023-03-22 19:52:59 发布

阅读量98

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46421045/article/details/104857143

版权

笔记专栏收录该内容

96 篇文章 0 订阅

订阅专栏

<!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>

Stirve unremitting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素类型的转换

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box1{ width:300px; height:100px; background: pink; dis...
复制链接

扫一扫