display:inline,display:inline-block,display:block 区别
之前一直迷惑于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 区别的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素
block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...
- Initialization failed for block pool Block pool（转载）
2014-06-18 20:34:59,622 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed ...
- style.display = "inline或inline";和style.display = "";的区别
function a(){ if($('#b').attr('checked')){ $('.c').css("display",""); //"di ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- Block formatting context & Inline formatting context(BFC&IFC)的区别（转载）
何为BFC与IFC bfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中. 元素是块级元素or行内元素由其display属性决定: block, table, ...
- 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{ ...
- display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）
首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...
- display：none与visibility：hidden区别
display:none与visibility:hidden有一个共同的作用是隐藏要显示的内容isplay:none 隐藏,但是不占空间 “看不见摸不到” 加载 display:none 隐藏,但是不 ...
随机推荐
- JavaScript Web Application summary
Widget/ HTML DOM (CORE) (local dom) DOM, BOM, Event(Framework, UI, Widget) function(closure) DATA (c ...
- 主流屏幕对比：IPS/LTPS/CGS/IGZO/AMOLED
IPS.LTPS.CGS.IGZO.AMOLED都是什么屏幕又有什么区别?目前的手机屏幕技术实在太多,本文旨在介绍各种面板以及屏幕技术,便于大家更好地进行区分. 近年来手机屏幕技术层出不穷,早在几年前 ...
- COCI2014-2015CONTEST#7——POLICE
http://www.hsin.hr/coci/archive/2014_2015/contest7_tasks.pdf [题目描述] 有N个书架,每个书架可以容纳M本书.给出了若干本书,每本书有一个 ...
- C++ 匿名名字空间及静态非成员函数
在C++中,static有一个感觉被较少提及的用法:修饰非成员函数,这个用法实际是从C语言继承来的.其作用是表明这个函数只在当前编译单元中有效.这就使这个函数的所有引用在编译时就可以全部确定,无需进入 ...
- java中的接口和抽象类是什么？
抽象类与接口的区别 abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力.abstract c ...
- python_Opencv_图像的基础操作
目标 获取像素值并修改 获取图像的属性(信息) 图像的ROI() 图像通道的拆分及合并 为图像扩充边缘 几乎所有以上的操作,与Numpy 的关系都比与OpenCV 的关系更加紧密,因此熟练Numpy ...
- jenkins 执行可执行jar包测试中，请求乱码解决办法
自动化脚本在eclipse中执行,没有问题.jenkins构建打包自动化脚本,在执行脚本时,遇到了脚本中发送的请求的参数为乱码,实现了如下一些解决办法: 1.设置操作系统环境JAVA_TOOL_OPT ...
- wxPython学习笔记(初识)
今天正式开始学习wxPython,基于对类的不熟悉,理解有点生硬,但还是做了些笔记. 1.是什么组成了一个wxpython程序? 一个wxpython程序必须有一个application(wx.App ...
- DTN学习的一些有用链接
1.DTN研究组,该网站提供了一些代码,有NS2上的实现,也有用java实现的源码. http://www.dtnrg.org/wiki/Code 2.DTN实现的另一个版本,与ONE比较,目前还没用 ...
- 安卓kernel自主唤醒系统方法—设置alarm
我们知道alarm一般是上层设置后.kernel驱动里面将set time写入alarm寄存器,到达时间后trigger,殊不知kernel里面也能够自主设置alarm. 尤其是系统在休眠时驱动nee ...