-
显示：内联块感觉有点类似：显示单元格，如内部元素的包容。然而，由于显示：内联块的最大区别是没有父元素的匿名软件包的特点，这使得使用显示：inline-block属性是免费的，用文字、图片混合，可以嵌入到该元素的块属性，可以在元素的内联的水平。这需要所有黑人和白人，都。
对内联块属性的元素是适用于内联盒模型，所以当列表中的列表元素都不是很高，他们不会错。所有的内联元素和每行形成一个线框内联块元素，与线框的高度是由最高的内部因素决定的。因此，即使内联块属性的列表元素的异常，它是整个线框高度。因此，下一行的列表元素不会放错地方，如下图所示，我自己的草图很糟糕：
据一些前辈，IE6 / 7不支持显示：inline-block属性，可以使标签具有类似inline-block，起初我也接受这种说法，但后来表示怀疑，最近使用的文本对齐：对齐；做一些性能测试的风格时，证实：IE6 / 7确实显示：inline-block属性不受支持，让像内联块，尤其是内联元素，完美的表现可以用一个词来形容它。
IE8 +和现代浏览器，直接使用：
CSS代码将内容复制到剪贴板。
{显示：内联块；}
支持任何级别的元素都可以。
做与不支持IE6浏览器 / 7怎么样如果内联级别的元素（如标签、跨度标签等）与上述相同，则直接：
{显示：内联块；}
没关系.对于这两个浏览器，它的工作方式与*缩放：1相同。
如果它是块级别的元素，比如李标记，需要更多的代码，我现在知道有两种方法，如下所示：
CSS代码将内容复制到剪贴板。
显示：内联块；…}
显示：内联；}
或：
CSS代码将内容复制到剪贴板。
显示：内联；缩放：1；…}
块级别的内联块级别与表达式层中的内联级别不同。
内联块问题
注意以上例子，细心的同学会发现李之间有一个很小的差距，而在我们的代码中没有设置空白和其他相关属性。为什么
默认内联元素
首先，让我们看一下默认内联元素的性能：
HTML代码
xml代码将内容复制到剪贴板。
首页
热点
CSS代码
CSS代码将内容复制到剪贴板。
一个{ margin: 0；padding: 0；边框1px solid # 000；}
设计素描
默认情况下，内联元素之间存在一个间隙，因此内联和块的属性组合的内联块属性自然具有此特性。
这些空白是什么它们是空白字符！
消除空白
在浏览器中，空白字符不会被浏览器忽略，多个连续的空白字符浏览器会自动合并成一个，我们在编写代码时写空格，所有的行都会产生空白字符，所以这两个元素之间会有间隙。如果上面例子中的标记是用一行写的，那么空格就会消失，菜单就会变得紧凑。
虽然空白的浏览器，一个正常的表现行为，但通常情况下，设计师的同学的设计手稿不出现这些差距。当我们恢复设计草案时，我们如何消除这些差距
为了消除空白字符所产生的空白，我们首先需要了解空白字符基本上是字符。通过设置字体大小属性，我们可以控制产生的空白的大小。
首先，我们设置字体大小要50px如下修改CSS代码：
CSS代码将内容复制到剪贴板。
UL、李{填充：0；保证金：0；列表样式类型：无；字体大小：50px }
李{显示：内联块；边框1px solid # 000；宽度：100px；文本对齐：中心；字体大小：12px }
我们修改50px UL的字体和李的字体大小保持原来的字体大小为12px，而且效果如下：
可以看出，菜单之间的差距越来越大。
然后我们设置字体站点属性为0px，和代码如下
CSS代码将内容复制到剪贴板。
UL、李{填充：0；保证金：0；列表样式类型：无；字体大小：0px }
李{显示：内联块；边框1px solid # 000；宽度：100px；文本对齐：中心；字体大小：12px }
结果如下：
兼容性问题
在IE8，FF和Chrome浏览器，内联块可以完美兼容，考虑到较低的浏览器如IE6、IE7的占有。虽然有一些方法可以兼容，但是这篇文章将不再重复，您可以对查找相关信息感兴趣。
内联块的应用
内联块的应用程序有哪些场景当我们考虑一个技术应用的情况下，首先要考虑是否与工艺要求的特点是consistent.inline-block特征是特定内联和块两种属性的组合，可以设置宽度和高度，并保持线阵列元素的特点，在此基础上，所有的设置，可以设置场景的大小是可以考虑用inline-block.the以下实例方案如下：
页面头部菜单
水平菜单的头是典型的需要设置大小使用，在内联块，菜单实现的基本上都是采用浮动属性，浮动属性将导致崩溃的高度，需要清除浮动问题，实现内联块使用不需要关心这个问题。代码如下：
HTML代码
xml代码将内容复制到剪贴板。
服装城
美丽的房子
超市
全球采购
闪购
集团采购
拍卖
财务
智能
CSS代码：
CSS代码将内容复制到剪贴板。
A，UL，李{填充：0；边距：0；列表样式类型：无；}
一个{文字装饰：无；颜色：# 333；}
标题：字体大小：0；文本对齐：中心；}
。头李{display: inline块；字体大小：16px；宽80px；文本对齐：中心；}
设计素描
这是实现京东主页的头部导航菜单，并使用内联块可以简单地列出横向菜单列表。
内联块元素
除了菜单，所有的东西都需要安排在行内，并且可以设置为需要用行块来实现的大小。
例如，当使用标签创建按钮时，需要设置按钮的大小，我们可以使用内联块来实现它。
HTML代码
xml代码将内容复制到剪贴板。
点击右边的按钮直接购买。
购买
CSS代码
CSS代码将内容复制到剪贴板。
。按钮{显示：内联块；宽度：150px；身高：45px；背景：# b61d1d；颜色：# FFF；颜色；X；
设计素描
布局
内联块也可以用于一般的布局，使用它不需要注意浮点属性布局引起的问题。
例如，创建一个通用的3列布局。
HTML代码
xml代码将内容复制到剪贴板。
网头
左
中间
赖特
网页底部
CSS代码
CSS代码将内容复制到剪贴板。
体，div边距：0；填充：0；}
页眉，页脚。。{宽度：100%；背景：# CCC；身高：120px；文本对齐：中心；线高度：120px；}。
。内容{ margin: 0 auto；背景：# ff6a00；宽度：1000px；字体大小：0；}
。内容。左。内容。中心。content.rightright {display: inline块；字体大小：16px；身高：400px；}
。内容。离开。content.rightright {宽度：200px；}
。content.center {宽度：600px；背景：# 00ffff；}
设计素描
本例使用内联块来创建一个通用的Web页面布局。
至于内联块的应用，只要从左到右，从上到下，需要设置大小列表就可以用它来实现，而这种需求是很常见的。比较浮，我推荐inline-block.there应该很多内联块的应用，我们可以挖掘出很多。
总结
与使用浮点数所造成的问题相比，使用内联块的关键是空格字符造成的问题。这也可以很方便的解决。
使用内联块可以使列表布局非常方便，这更符合我们的思维习惯。我们相信越来越多的学生会使用它。欢迎讨论。