css元素显示模式转换

最新推荐文章于 2022-10-10 21:45:00 发布

异想实验室

最新推荐文章于 2022-10-10 21:45:00 发布

阅读量110

点赞数

文章标签： css css3 前端

异想实验室

本文链接：https://blog.csdn.net/weixin_43775400/article/details/123193018

版权

转换命令：

转换为块元素：display:block

转换为行内元素:display:inline

转为行内块：display:inline-block

样例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素显示模式转换</title>
		
		<style>
		
		a{
			width: 200px;
			height: 200px;
			background-color: pink;
			display: block;
		}

		
		div{
			width: 200px;
			height: 200px;
			background-color: blue;
			display: inline;
			color: #FFFFFF;
		}
		span{
			width: 200px;
			height: 200px;
			background-color: aqua;
			display: inline-block;
		}
		
		</style>
		
		
	</head>
	<body>
		
		
		
		<a href="http://www.baidu.com" target="_blank">行内元素转换成块元素</a>
		
		<div>我是块元素</div>
		<div>我是块元素</div>
		
		<br>转换为行内块display:inlink-block<br>
		
		<span>行内元素转换为行内块元素,并且可以指定宽度和高度</span>
		<span>行内元素转换为行内块元素,并且可以指定宽度和高度</span>
	</body>
</html>

执行效果：