之前一直迷惑于display:inline/inline-block/block的异同，在度娘谷哥的帮助下，突然有了一点思路。

按照网上的介绍，inline将对象转化为内联元素，block将对象转化为块元素，而inline-block则将对象转化为具有块属性的内联元素。

可能是因为本人理解能力有限，一直很纠结着难以理解这个说法。后来看到这么一个解释[1]：

内联元素即所有元素都在一行上，无前后换行符，且无法限定高宽，即高宽为其内容的高宽。例如<input>,<img>,<span>,<em>都是内联元素的例子。

块元素即总在新行上开始，可控制高宽。<div>,<p>,<form>,<h1>为块元素的例子。

从例子上说，对span进行背景色限定时，会发现span的背景色总是和文字大小相符，即说明了内联元素的特性。而对div增加背景色限定，则可无视其内容，根据div的高宽进行渲染。

但是，如果需要对span进行背景色限定，但又要对span的大小做规定，那就用到了inline-block。

<html>
<head>
<style>
#content{width:auto;height:200px;}
.blockdiv{background:#ccc;width:50%;height:50px;}
.inlinespan{background:#f60;width:50%;height:50px;}
</style>
</head>
<body>
<div id="content">
<div class="blockdiv">这段文字用于测试div的大小</div><span class="inlinespan">这段文字用于测试span的大小

</span>

</div>
</body>
</html>

例如上面这个例子，假如想使div.blockdiv和span.inlinespan在一行，但又希望控制div.blockdiv的高度，即可使用div.blockdiv{display:inline-block;}

inline-block即将对象对外转换为内联元素，但对内其内容又可限定高宽，具有块元素的特征属性。这样一来，规定了inline-block的元素会和周围inline的元素在一行，但它又可以指定高宽。

仍旧是万恶的IE，IE6/7对inline-block的支持不够完善。因此需要采用hack的方式，但首先需要明了这种hack的原理：

这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失。但需要在两个css中[2]。

IE6/7可识别的hack为*,IE6为_。参考[3,4]后，认定在现在IE6/7下的inline-block可通过以下原理实现。在IE中的方式有以下几种，例如object

1、#object{

　　display:inline-block;//激活inline-block，使之在除IE8/7/6下的浏览器均实现,同时使IE下元素触发block

　　zoom:1;//激活IE下的对象haslayout属性

}

　　#object{

　　*display:inline;//IE6/7下的对象在保持有haslayout属性前提下，表现为inline

}

2、#object{

　　 float:left;//触发layout，表现为块元素

　　 display:inline;//使之产生inline效果

}

3、#object{

　　display:inline; //先使对象呈内联状态

　　zoom:1; //激活layout

}

因此，display:inline-block在IE中的hack可表现为：

1、为对象增加haslayout属性，使之表现为块元素

2、将对象转换为inline.(haslayout不消失）

3、顺序可颠倒。

参考：

1.http://www.cnblogs.com/jdonson/archive/2011/06/10/2077932.html

2.http://ideal.ncepu.me/2012/03/25/1-182/

3.http://www.68design.net/Web-Guide/HTMLCSS/41207-4.html

4.http://www.codesky.net/article/201107/169482.html

display:inline,display:inline-block,display:block 区别的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  3. block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  4. Initialization failed for block pool Block pool（转载）

    2014-06-18 20:34:59,622 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed ...

  5. style.display = "inline或inline";和style.display = "";的区别

    function a(){ if($('#b').attr('checked')){ $('.c').css("display",""); //"di ...

  6. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  7. Block formatting context & Inline formatting context(BFC&IFC)的区别（转载）

    何为BFC与IFC bfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中. 元素是块级元素or行内元素由其display属性决定: block, table, ...

  8. td高度不随内容变化display:block;display:block;display:block;display:block;display:block;

    在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ height:236px; overflow:hidden; 在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ ...

  9. display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

    首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...

  10. display：none与visibility：hidden区别

    display:none与visibility:hidden有一个共同的作用是隐藏要显示的内容isplay:none 隐藏,但是不占空间 “看不见摸不到” 加载 display:none 隐藏,但是不 ...

随机推荐

  1. 转：MongoDB调查总结

    与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度:举例来说,在传统的关系型数据库中,一个COUNT类型的操作会锁定数据集,这样可以保证得到“当前”情况下的精确值 ...

  2. 使用Protractor进行AngularJS e2e测试案例

    环境: y@y:karma-t01$ protractor --version Version y@y:karma-t01$ node -v v4.2.2 y@y:karma-t01$ y@y:kar ...

  3. BZOJ1660: [Usaco2006 Nov]Bad Hair Day 乱发节

    1660: [Usaco2006 Nov]Bad Hair Day 乱发节 Time Limit: 2 Sec  Memory Limit: 64 MBSubmit: 606  Solved: 289 ...

  4. js接收后台时间数据变成秒处理为正常格式

    在做项目时,后台数据json传到前台ajax,数据中包含DateTime格式的数据,前台js操作时间数据的时候却发现日期变成了秒格式 js能对日期操作的那些方法均不能使用了,例如getDay()等等, ...

  5. 【索引】XBox360玩机心得

    基础知识 查看XBox360的系统版本信息:http://www.cnblogs.com/duxiuxing/p/4292140.html XBox360光盘游戏的安装: 自制系统 XBox360自制 ...

  6. 利用C++11的function和bind简化类创建线程

    问题引出 当在类中需要创建线程时,总是因为线程函数需要定义成静态成员函数,但是又需要访问非静态数据成员这种需求,来做若干重复性的繁琐工作.比如我以前就经常定义一个静态成员函数,然后定一个结构体,结构体 ...

  7. [git] github 使用简单记录

    前提 :1. 已有 github 账号.2. 已安装 git .3. 在 github 和 本地 git 客户端交互秘钥.(这步我记得需要做,有点久远,不确定.) 正文: 下面是一个简单的例子.先在 ...

  8. K - Leapin' Lizards - HDU 2732（最大流）

    题意:在一个迷宫里面有一些蜥蜴,这个迷宫有一些柱子组成的,并且这些柱子都有一个耐久值,每当一只蜥蜴跳过耐久值就会减一,当耐久值为0的时候这个柱子就不能使用了,每个蜥蜴都有一个最大跳跃值d,现在想知道有 ...

  9. UVa 10025: The ? 1 ? 2 ? ... ? n = k problem

    这道题仔细思考后就可以得到比较快捷的解法,只要求出满足n*(n+1)/2 >= |k| ,且n*(n+1)/2-k为偶数的n就可以了.注意n==0时需要特殊判断. 我的解题代码如下: #incl ...

  10. C#中用PadLeft、PadRight 补足位数

    在 C# 中可以对字符串使用 PadLeft 和 PadRight 进行轻松地补位. PadLeft(int totalWidth, char paddingChar) //在字符串左边用 paddi ...