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 ...
随机推荐
- XAMPP(v1.83)中的PHP(v5.5.15)访问SQLServer2014
驱动安装: 1. 下载SQLServer的微软官方PHP驱动,http://msdn.microsoft.com/en-us/sqlserver/ff657782.aspx 2. 安装SQLSRV31 ...
- Dynamic Performance Tables not accessible Automatic Statistics disabled for this session
使用oracle时候统计会出现这个提示 Dynamic Performance Tables not accessible Automatic Statistics disabled for this ...
- loadrunner基本概念、安装及术语（一）
一.初识loadrunner: LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题,LoadRunner能够对整个企业架 ...
- 转载 Deep learning：四(logistic regression练习)
前言: 本节来练习下logistic regression相关内容,参考的资料为网页:http://openclassroom.stanford.edu/MainFolder/DocumentPage ...
- hbase建索引的两种方式
转载自http://blog.csdn.net/ryantotti/article/details/13295325 在二级索引的实现技术上一般有几个方案: 1. 表索引 使用单独的hbas ...
- android 垂直 SeekBar 源代码(VerticalSeekBar)[转]
主要是继承 AbsSeekBar 然后修改下面这些方法 onProgressRefresh() //当进度条数据更新的时候,例如我们拖动滑动条的时候,这个方法被调用 setThumbPos() //这 ...
- AngularJS 从零开始学习(一)
什么是AngularJS? AngularJS是一个把HTML(视图)绑定到JavaScript对象(模型)上的框架.当模型改变时,页面也能自动随之更新,反之亦然.当某个域的内容发生变化时,与之关联的 ...
- Gym 100518E Embedding Caterpillars
构造+DFS 很容易的可以构造两个,最后一个不会构造的话 DFS一下就可以了 #include<iostream> #include<string> #include< ...
- MapReduce入门例子
计算文档中不同单词的个数. hello you hello me 步骤如下:
- 第13章 Swing程序设计----常用面板
面板也是一个Swing容器,它可以作为容器容纳其他组件,但它也必须被添加到其他容器中. Swing常用的面板包括JPanel面板和JScrollPanel面板. 1.JPanel面板 import j ...