display属性及inline-block值（可用来布局）
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值（可用来布局）的更多相关文章
- CSS中的display属性（none,block,inline,inline-block,inherit）
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 把display 属性改为block样式变化问题
可能的值 值 描述 none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-blo ...
- 深入理解和应用display属性（二）
四.inline-block 此类元素是inline + block的合体 1) margin和padding都有效:width和height都有效: .inline{ display: inline ...
- CSS学习笔记05 display属性
HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建.并且块级 ...
- css3 之 display 属性
1.定义 语法:display:none | inline | block | list-item | inline-block | table | inline-table | table-capt ...
- CSS 基础 例子 display属性：block、inline和inline-block的区别
HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...
- display常用的三种值：block、inline、inline-block
display:block(块级元素 ) 会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父级宽度 display:inline(内联(行级)元素 ) 不会独占一 ...
- display属性值
display属性值:none 此元素不会被显示. block 此元素将显示为块级元素,此元素前后会带有换行符. inline 默认.此元素会被显示为内联元素,元素前后没有换行符. inline-bl ...
- CSS display属性的值及作用
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|tab ...
随机推荐
- HDU 5234 Happy birthday 动态规划（三维数组）
题目大意:过生日,有一个N*M的表格,每个位置都有一块一定重量的蛋糕你可以选择吃完或者不吃,从(1,1)走到(n,m),每次只能向右走或向下走,最多能吃k重量的蛋糕.问你最多能吃多少蛋糕. 题目思路: ...
- DEAMONTOOLS: installation
installing daemontools .. adding -I /usr/include/errno.h to last first line of conf-cc mkdir -p /pac ...
- selenium工具简介
通过selenium百科可知: 组件 Selenium IDE:一个Firefox插件,可以录制用户的基本操作,生成测试用例.随后可以运行这些测试用例在浏览器里回放,可将测试用例转换为其他语言的自动化 ...
- HDU1969:Pie(二分)
Pie Time Limit : 5000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submissio ...
- android touchEvent事件学习
学习网址:http://www.apkbus.com/forum.php?mod=viewthread&tid=44296 1:Android Touch事件传递机制解析 android系统中 ...
- WindowsAPI 之 CreatePipe、CreateProcess
MSDN介绍 CreatePipe A pipe is a section of shared memory that processes use for communication. The pro ...
- 英文SEO外部链接资源收集之常用的footprints
inurl:/privacy-policy "Using Article Directory plugin"inurl:/terms "Using Article D ...
- 删除MySQL二进制日志
服务器上的120G SSD硬盘空间用了92%,检查后发现,原来是 MySQL的二进制日志没有及时清除,占用了大量的空间, 于是直接用命令:reset master 一把删干净了. 1 reset ma ...
- virtualbox, vt-s, rmmod kvm-intel
http://blog.sina.com.cn/s/blog_4e7b97f00100fltu.html装完后,去下个jdk,坑爹的Oracle非要让老子注册,试了几次都没有成功,密码不合格拉,邮箱已 ...
- brbustoj 1818 石子合并问题--直线版
比较经典且基础的区间dp,转移方程为 dp_max[i][j] = max(dp_max[i][j],dp_max[i][k] + dp_max[k+1][j] + sum[j]-sum[i-1]); ...