display:block / inline / inline-block 三个之间的区别

标签：使用   strong   for   ar   div   代码   line   on   

块元素特点：

　　每次都是从新行开始；

　　可以设置宽、高，行高，顶底边距等；

　　<div>  <ul> <ol> <li> <dl> <dt> <dd> <table> <form>  <p>  <hr/><textarea>等都是

行元素特点：

　　和别的元素在同一行；

　　不可以设置宽高，行高，顶底边距等；

　　<span> <img> <var> <em> <strong> <imput> 等

display:block;将行元素设置为块元素；当一些行元素需要设置宽高等属性的时候使用；无须设定宽度即可为一个块元素设定与文字同宽的背景色。

display:inline;将块元素设置为行元素；当块元素需要在一行的时候，如横向列表导航；

display: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;...}

display:block / inline / inline-block 三个之间的区别,布布扣,bubuko.com

display:block / inline / inline-block 三个之间的区别

标签：使用   strong   for   ar   div   代码   line   on   

原文地址：http://www.cnblogs.com/bjchenxn/p/3919487.html