Html中的行级元素和块级元素的区别

时间:2022-01-21作者:klpeng分类:IT综合浏览:692评论:0

        对于行级元素和块级元素的区别。  某标签是块级元素时,可以设置宽高,并且不能和其他标签在一行;某标签是行级元素时,不可以设置宽高,可以和其他标签在一行

        也就是说,不受浮动等干扰,同一行有多个标签显示的话就这些标签都是行级标签。其中常用标签div就是块级元素和span标签是行级元素。

        下面举一个例子。

        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:100px;
				height:100px;
				background-color: green;
			}
			span{
				width:100px;
				height:100px;
				background-color:red;
			}
			
		</style>
	</head>
	<body>
		<div >div1</div>  
		
		<span >span1</span>   <span> span2</span>
		
		<div >div2</div> 
		
		
	</body>
</html>

        效果为:Html中的行级元素和块级元素的区别

        上述,我们对其div和span都设置了宽高,但是span标签没有受到影响,div受到了影响。并且能够独立的在某一行出现多个标签的话,无疑就是行级标签了。

        行级标签和块级标签的设定具体标签有默认的设置,不过我们也可以自己设置某标签是否为行级标签和块级标签。

        用到的是样式中的属性display。

        display:block;  将该标签设置为块级标签。能够设置宽高,不可以和其他标签占一行。

        display:inline; 将该标签设置为行级标签。不能设置宽高,可以和其他标签占一行

        display:inline-block;将该标签 设置为可以设置宽高, 可以和其他标签占一行。

         下面我们对其上述的例子进行修改来表现出display设置不同值的效果。(修改完后,又会重置代码到上述代码)

        1.我们对其span标签添加display:block, 能够设置宽高,不可以和其他标签占一行。 ;

            div{
				width:100px;
				height:100px;
				background-color: green;
				
			}
			span{
				width:100px;
				height:100px;
				background-color:red;
				display:block;
			}

        效果为: 我们发现span标签有了固定的宽高,并且一个标签占据一行。

Html中的行级元素和块级元素的区别

        2.我们对其div标签添加display:inline,不能设置宽高,可以和其他标签占一行。

        

            div{
				width:100px;
				height:100px;
				background-color: green;
				display:inline;
			}
			span{
				width:100px;
				height:100px;
				background-color:red;
				
			}

        效果为: 我们发现div标签没有了固定行高,并且和其他标签可以在同一行。

Html中的行级元素和块级元素的区别

           3.我们对其span添加display:inline-block;  设置为可以 设置宽高, 可以和其他标签占一行

                

	        div{
				width:100px;
				height:100px;
				background-color: green;
				
			}
			span{
				width:100px;
				height:100px;
				background-color:red;
				display:inline-block;
			}

         效果为:span标签可以设置固定大小,可以和其他标签占一行。

        Html中的行级元素和块级元素的区别

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢