CSS之display:inline、block、inline-block

最新推荐文章于 2024-08-25 13:06:40 发布

yan_yuanfeng

最新推荐文章于 2024-08-25 13:06:40 发布

阅读量757

点赞数 5

分类专栏： HTML、CSS 文章标签： css display 行级块级行块

本文链接：https://blog.csdn.net/yan_yuanfeng/article/details/52382576

版权

HTML、CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本博客只是个人见解，如有什么不妥的望各位大牛多多指点。<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);">CSS之display ：</span>

在讲display之前首先先简单说下在CSS中行级、块级元素的概念：

行级元素：

像span 、a、b、strong、i、br、em、img（属于特殊的行级标签）、em等是属于行级标签，行级标签说的通俗一点就是在正常的文本流排版的时候能够在同行显示，（当然是建立在同行都是行级标签的情况下），一般行级标签是不能设置宽高的，不过也有特殊的就像img是可以设置width height margin pandding等属性，但依然属于行级标签，原因就是可以和行级标签同行显示。总而言之：能和行级标签同行显示的就是行级标签。

块级标签：

像div 、p、h1~h6、hr 、form ul li等是属于块级标签，块级标签和行级标签从字面上可以理解他们的区别，块级标签是不能同行显示，即使和行级标签在一起也是不能同行显示，在不设置浮动，position定位、display属性的情况下是独占一行的，块级标签可以设置width height margin pandding等属性，一般默认情况高度是由块级标签的内容决定宽度由父级继承。总而言之：默认情况下块级标签只能独占一行，不能和任何标签同行显示（不设置浮动，position定位、display等属性）。

行块：

行块其实就是行标签和块标签的结合体（个人理解），能够让标签以块的形式行级显示，兼具行级标签和块级标签的特性，既可以同行显示又可以设置width heightmargin pandding等属性。

CSS之display:inline、block、inline-block

display: inline 将元素显示为行级标签。

display：block 将元素显示为块级标签。

display：inline-block 将元素显示为行块形式。

为了更容易理解下面先贴一段代码以及效果图：span是行级标签，p是块级标签，很明显块级标签比较霸道要独占一行，不和行级标签span同行显示，我给p设置了一个灰色背景应该比较清晰的看出效果。

示例1、

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			background-color: gray;
		}
	</style>
</head>
<body>
	<span>这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签<span style="color:#ff0000;"><p>我是块级标签p</p></span>span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span</span>
</body>
</html>

当把块级标签p通过display：inline-block设置为行块形式可以比较形象的看出块级元素以行级的形式显示的效果,为了更加形象的显示，我给块级标签p加了margin:10px;padding: 10px;下面是代码和效果图。

示例2、

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{
			background-color: gray;
			display: inline-block;
			margin:10px;
			padding: 10px;
		}
	</style>
</head>
<body>
	<span>这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签<p>我是块级标签p</p>span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span这是行级标签span</span>
</body>
</html></span>

display：inline-block在很多项目中用的其实不是很多，因为他还有很多的弊端，下面我列举常见的问题以及解决办法。

1、我设定了3个div给定了宽高和背景颜色，并用display:inline-block让他能够同行显示。代码，效果如下

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.div1{
			background-color: red;
			width: 200px;
			height: 200px;
		}
		.div2{
			background-color: yellow;
			width: 200px;
			height: 200px;
		}
		.div3{
			background-color: green;
			width: 200px;
			height: 200px;
		}
		div{
			display: inline-block;
		}
	</style>
</head>
<body>
	<div class="div1">
		
	</div>
	<div class="div2">
		
	</div>
	<div class="div3">
		
	</div>
</body>
</html></span>

但当div内有内容时他的对齐方式就不是这样了，神奇的效果出现了：

<span style="font-size:18px;"><body>
	<div class="div1">
		1
	</div>
	<div class="div2">
		2
	</div>
	<div class="div3">
		
	</div>
</body></span>

这是为啥呢？因为用了display：inline-block后会有一条参考线当div内有内容时会以里面的文字进行对齐，我的解决办法是：给三个div设置vertical-align: top（垂直对其方式为顶部对其）;就会和预期的效果一样了。方法有很多，这只是一种的解决方法。

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.div1{
			background-color: red;
			width: 200px;
			height: 200px;
		}
		.div2{
			background-color: yellow;
			width: 200px;
			height: 200px;
		}
		.div3{
			background-color: green;
			width: 200px;
			height: 200px;
		}
		div{
			display: inline-block;
			vertical-align: top;
		}
	</style>
</head>
<body>
	<div class="div1">
		1
	</div>
	<div class="div2">
		2
	</div>
	<div class="div3">
		
	</div>
</body>
</html>