display:block就是将元素显示为块级元素.

　　block元素的特点是：
　　总是在新行上开始；
　　高度，行高以及顶和底边距都可控制；
　　宽度缺省是它的容器的100%，除非设定一个宽度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。

display:inline就是将元素显示为行内元素.

　　inline元素的特点是： 
　　和其他元素都在一行上；
　　高，行高及顶和底边距不可改变；
　　宽度就是它的文字或图片的宽度，不可改变。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。

　　inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

　　让一个inline元素从新行开始；
　　让块元素和其他元素保持在一行上；
　　控制inline元素的宽度（对导航条特别有用）；
　　控制inline元素的高度；
　　无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

　　inline-block的元素特点：

　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

　　并不是所有浏览器都支持此属性，目前支持的浏览器有：Opera、Safari在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如Opera中块元素呈递为内联对象。

　　IE下块元素如何实现display:inline-block的效果？

　　有两种方法：
　　1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

　　div {display:inline-block;...} 
　　div {display:inline;}

　　2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

　　div {display:inline; zoom:1;...}

　　以下用个例子来说明三者的区别和用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>display:inline、block、inline-block的区别</title>
</head>
<style>
div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;height:52px;color:#fff;}
.b{display:block;}
.i{display:inline;}
div.ib{display:inline-block;}
div.ib{display:inline;}
a.ib{display:inline-block;}
a.ib{display:block;}
span.v{padding:0;margin:0;border:0;vertical-align:middle;height:100%}
</style>
<body>
<div>div display:block</div>
<div class="i">div display:inline</div>
<div class="ib">div display:inline-block</div>
<span>span display:inline</span>
<span class="b">span display:block</span>
<span><a class="ib">a display:block</a></span><br />
<div><span class="v"></span>vertical-align:middle</div>
</body>
</html>

布局时会用到（考虑兼容浏览器）

最简单：所有元素固定宽高，然后浮动。

问题：如果有些元素高度可能会高一些

解决办法：使用disply:inline-block;并且vertical-align: top（基线问题）

但在ff2, ie6, ie7中依然无效

firefox 2 不支持 inline-block，但是它支持 mozilla 特有的显示属性 ‘-moz-inline-stack’，这个属性和 inline-block 比较像。把它加在 display: inline-block 之前，ff2 会忽略 inline-block 而保留 -moz-inline-stack，因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。

li {

    width: 200px;

    min-height: 250px;

    border: 1px solid #000;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: top;

    margin: 5px;

}

每一个Li的内容再用div嵌套一下。

嵌套div的方法可以解释为：ff对于所有的属性为stack(当然保持-moz-inline-stack)的元素，它的第一级子元素会继承该元素的宽度和高度，但是子元素的子元素就不会再继承其宽和高了。

IE7：

当我们给 <li> 加上 zoom:1 和 *display:inline(用于 ie6 和 ie7 的星号 hack) 之后，在 ie7 中它们就可以像 inline-block 一样显示了：

li {

    width: 200px;

    min-height: 250px;

    border: 1px solid #000;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: top;

    margin: 5px;

    zoom: 1;

    *display: inline;

    }

ie6 不支持 min-height，但是多亏它对 height 属性的不正确处理，我们可以用它来代替。把 _height(ie6 下划线 hack) 设为 250px 使所有的 <li> 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。其他所有的浏览器会忽略 _height。

现在为止，对所有的浏览器都有效了

 

display属性及inline-block值（可用来布局）的更多相关文章

  1. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  2. 把display 属性改为block样式变化问题

    可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...

  3. 深入理解和应用display属性（二）

    四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...

  4. CSS学习笔记05 display属性

    HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...

  5. css3 之 display 属性

    1.定义 语法:display:none | inline | block | list-item | inline-block | table | inline-table | table-capt ...

  6. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  7. display常用的三种值：block、inline、inline-block

    display:block(块级元素 ) 会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父级宽度 display:inline(内联(行级)元素 ) 不会独占一 ...

  8. display属性值

    display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...

  9. CSS display属性的值及作用

    display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...

随机推荐

  1. cfdiv2/c/找规律

    题目连接 £:若n<4,NO: £:若n==4,特判,n==5,特判. £:若n>=6,用2-4组成24,1和5和6组成零,即可. #include <set> #includ ...

  2. initWithFrame、initWithCoder、awakeFromNib的区别和调用次序 & UIViewController生命周期 查缺补漏

    当我们创建或者自定义一个UI控件时,就很可能会调用awakeFromNib.initWithCoder .initWithFrame这些方法.三者的具体区别如下: initWithFrame: 通过代 ...

  3. Swift 学习笔记 （二）

    原创:转载请注明出处 41.闭包表达式语法(Closure Expression Syntax) 闭包表达式语法有如下一般形式: { (parameters) -> returnType in ...

  4. 快学scala-第七章 包和引入

    知识点: 1. Scala.Java.C++的包的目的都是为了管理大型程序中的名称.与对象或类的定义不同,同一个包可以定义在多个文件当中.或者在同一个文件中,为多个包贡献内容. 2. Scala的包和 ...

  5. hdu 1728 逃离迷宫 (BFS)

    逃离迷宫 Time Limit : 1000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissi ...

  6. HDU - 1702 ACboy needs your help again!（栈和队列）

    Description ACboy was kidnapped!! he miss his mother very much and is very scare now.You can't image ...

  7. dotnet core error 0x80070057

    安装补丁KB2533623 https://support.microsoft.com/en-us/kb/2533623

  8. Linux系统编程读书笔记

    文件I/O模型 Linux的哲学思想,一切皆文件,这也是Linux文件操作的方便之处.系统调用不会分配缓冲区用以返回信息给调用者.所以必须提前分配大小合适的缓冲区并将缓冲区指针传递给系统调用. 1.o ...

  9. 阅读android项目源码

    版权声明:欢迎转载,转载请注明出处;http://blog.csdn.net/angcyo 上一篇,我们成功导入并运行了 贝壳单词 项目. 这篇文章, 带大家一起读一读源码. 打开 贝壳单词 项目,定 ...

  10. jq中的evet.target

    1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...