inline-block失效(inlineblock什么意思)

为什么 有时候 inline-block 不起作用

这个属性，ie下不是很好用，建议用浮动好一些，兼容方面不错。

元素设置inline-block添加文案后的元素塌陷问题（verticle-align属性解析）

? ?????? 在了解可以通过设置display：inline-block会将块级元素拥有inline元素一行排列的特性，那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列，这时候你可能说通过设置浮动float就可以解决，不着急，float的原理和实现作为补充内容会接着聊，那么接下来先通过效果图来看一下问题所在

效果如下：

是不是感觉不可思议？ 到底发生了什么呢？为什么加了文字后会出现塌陷和预期的不一样？

* inline?

1.inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

2.inline元素设置width,height属性无效。

3.inline元素的margin和padding属性。margin属性不会生效。padding属性会生效，但是会和其他兄弟元素发生边距重叠。

*block

1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

2.block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

3.block元素可以设置margin和padding属性。

*inline-block

1.简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

????????这个属性在前端领域出现得比较早，一开始以为是和text-align属性相反的设置，text-align是设置文本水平对齐方案，那么vertical-align肯定就是设置文本垂直对齐的方案啦，emm，其实也差不多，那么我们来分析一下这个属性：

*为当前元素设置垂直对齐方式，那我们首先就要明确有多少种方式可以选择（如果之前没有接触过vertical-align，看到这些选择可能会是懵的，别着急，继续往下看）

?*这里我希望你认真看一下vertical-align的官方定义及使用标注，你会发现特别说明只有inline和inline-block元素才能设置

????????解释一下 top middle baseline bottom ，这个是张鑫旭的一张图，想要通过我们小学的英文作业本来解释这个线的划分，暂时未发现更通俗易懂的解释

????????对于inline-block元素来说，他的基线取决于元素本身的特性，在该元素中没有行内子元素（DOM树的子元素，有块子元素不算但是块子元素中有行元素算）的时候或者overflow不为visible，该inline-block的基线为margin-bottom的下边界。否则，以该元素中最后一个行框子元素的基线为该元素的基线

????????这里先做一个声明：说到底设置display为inline-block没错，错在浏览器的vertical-align的默认值为baseline

????????由上面baseline的定义可知第一个li的baseline在哪 ，很明显就是下面这条黑色的线（上面一条黑线画失误请忽略。。。），如果不是很明白请多理解上面baseline的定义，如果上面的知识点你都懂，那么你应该明白了为什么第二个li会是那么排列

1.当然很明显的一个办法是为li设置vertical-align为top

2.第二个方法是设置overflow设置为hidden

3.第三个方法是干脆不设置display，直接设置float为left

1.float是一种脱离文档流的浮动，所以会对下面元素的布局产生影响

2.inline-block不会影响文档柳，所以不会影响下面的元素的布局

inline-block ie7下为什么不好使

在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。

从上面的分析也不难理解为什么IE6、IE7下对块元素设置display:inline-block属性无法实现inline-