关闭

CSS之display:inline、block、inline-block

标签: cssdisplay行级块级行块
315人阅读 评论(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>


2、第二个问题其实和第一个问题本质原因是一样的、也是参考线的问题,当给其中的一个div用margin进行上下移动时,整一行的行块都将进行移动,我在这就不进行演示了,解决办法有视情况而定,也可以用vertical-align:。

总结:其实display:inline-block在项目中用的并不多,很多地方可以通过float、position等方式替换来避免一些负影响。
最后,这是我的第一一篇博客,其实还有很多要讲,因为时间问题讲的不够详细,以后会继续完善自己的博客。感谢所有光顾我博客的博友!!!!!!
5
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:488次
    • 积分:29
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档