CSS-元素显示模式

最新推荐文章于 2023-03-10 11:10:33 发布

syyy9090

最新推荐文章于 2023-03-10 11:10:33 发布

阅读量130

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/syyy9090/article/details/105027877

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素两种类型。

块元素：

行内元素：

行内块元素：

元素显示模式转换：

特殊情况下，需要进行元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。

转换为块元素：display:block
转换为行内元素：display:inline （用的不多）
转换为行内块：display:inline-block

总结：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素模式</title>
	<style>
		.first {
			/*块元素可指定宽高*/
			width: 240px;
			height: 90px;
			background-color: pink;

		}
		span {
			/*行内元素不可设置宽高，但转换为行内块则可，
			行内块既拥有行内元素的属性也拥有块元素的属性*/
			 width: 200px;
			 height: 50px;
			 background-color: red;
			 display: block; /*行内元素span转换为块元素*/
			/* display: inline-block; /*行内元素span转换为行内块元素*/*/
		}
	</style>
</head>
<body>
	<div class="first">我是块级元素</div>
		<span>我是行内元素1</span>
	    <span>我是行内元素2</span>
	
	
</body>
</html>