CSS之display:inline、block、inline-block

原创 2016年08月31日 14:21:54

本博客只是个人见解,如有什么不妥的望各位大牛多多指点。<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等方式替换来避免一些负影响。
最后,这是我的第一一篇博客,其实还有很多要讲,因为时间问题讲的不够详细,以后会继续完善自己的博客。感谢所有光顾我博客的博友!!!!!!
版权声明:本文为博主原创文章,未经博主允许不得转载。

【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】display:inline-block和hasLayout hasLayout设计的初衷是用于辅助块级元素的盒子模型的,它是用于块级元素的。如果用于行内元素,会引发一些特殊效果。...

css中display:inline-block属性值的空隙消除

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...

DIV CSS display (block none inline)属性的用法

原文:http://www.cnblogs.com/Bill_Lee/archive/2011/04/11/2013110.html DIV CSS display (block n...
  • akiyame
  • akiyame
  • 2014年12月13日 22:41
  • 795

css中display:inline-block错位问题

就目前来说,常用的布局方式有table、div,因为使用table都是比较规整、传统的布局方式,现在大部分网页为了美观,大多使用div进行布局,使用div布局就避免不了对块级元素的布局调整,在仿作百度...

[CSS]display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

css中display:inline-block

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素...

CSS中多列块的实现小结 display : inline-block 内联块

最近在折腾HTML5和CSS3    -->   示例页面 在做网页菜单的时候,最上面需要加一行工具栏,并排放的,那我想弄四个等宽的box,然后并排放,这样以后想扩展也很好扩展。 刚开...
  • misol
  • misol
  • 2011年11月03日 19:40
  • 2716

CSS属性display:inline-block;实现列表布局

1、先说一下列表浮动布局列表浮动布局:指通过使用float属性,让列表元素依次排列的布局(通常是左浮动,float:left)。这是相当常见的也是目前最最主流的列表布局方式。列表浮动布局的局限性:每个...

详解CSS display:inline-block的应用

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。 基础知识 display:inline-...
  • zhuocr
  • zhuocr
  • 2017年03月03日 14:18
  • 430
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS之display:inline、block、inline-block
举报原因:
原因补充:

(最多只允许输入30个字)