标签元素转换

最新推荐文章于 2023-02-27 15:19:42 发布

shiyu18

最新推荐文章于 2023-02-27 15:19:42 发布

阅读量232

点赞数

分类专栏：标签类型转换块元素行内块文章标签： css html

本文链接：https://blog.csdn.net/shiyu18/article/details/109714564

版权

标签类型转换同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

块元素

1 篇文章 0 订阅

订阅专栏

行内块

1 篇文章 0 订阅

订阅专栏

标签元素转换，文本元素，块元素

学习了标签元素转换后练习
文本元素转换为块元素：
文本元素特性：初始属性无法设置宽高，并且会自动排列一行。
代码转换：display:block;/* 转换为块元素 */ display:inline; /* 转换为行内块元素 */ display:inline-block; /* 转换为行内文本元素 */

代码实现：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>元素转换</title>
		<style type="text/css">
			.box{
				display:block;
				/* 转换为块元素后可以设置宽高，margin: 生效 */
				width:300px;
				height:200px;
				background:red;
				/* display:inline-block; */

			}
			
		</style>
	</head>
	<body>
		<span class="box">文本标签转换为 块元素</span>
		<a href="#" target="_black">1</a>
	</body>
</html>

总结:标签类型转换的前提是需要熟记各类标签的特性
css html各类标签特点

shiyu18

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签元素转换

标签元素转换，文本元素，块元素学习了标签元素转换后练习文本元素转换为块元素：文本元素特性：初始属性无法设置宽高，并且会自动排列一行。代码转换：display:block;/* 转换为块元素 */ display:inline; /* 转换为行内块元素 */ display:inline-block; /* 转换为行内文本元素 */代码实现：<!doctype html><html> <head> <meta charset="utf-
复制链接

扫一扫