css的display属性

一、特性介绍

1. display:block

块级元素会单独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；
块级元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行；
块级元素可以设置margin和padding属性。

2. display:inline

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化；
inline元素设置width,height属性无效；
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

3. display:inline-block

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

** 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。**

• text-align属性对块级元素起作用，对行内元素不起作用；
• 块级元素独自占一行且宽度会占满父元素宽度，行内元素不会独占一行，相邻行内元素可以排在同一行
• 块级元素可以设置width和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行
• 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的margin-top、margin-bottom不起作用
• inline和inline-block会引起间距的空格
• 当行内元素设置float属性后，该行内元素的display属性会被赋予block值，且拥有浮动特性
• vertical-align 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素。

二、inline-block的那些事

inline-block 元素也可以设置 vertical-align属性（因为这个垂直对齐属性只对 只对行内元素、表格单元格元素生效：不能用它垂直对齐块级元素）。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生了元素间的空隙。

每个a之间都会有一个空隙，这个空隙是因为块级元素会换行，.HTML 中的换行符、空格符、制表符等合并为空白符.所以换行符会占据宽度,产生间隙
如何取消inline-block产生的空隙？
方法一

浏览器 margin值(左右)
火狐 margin:-4px
chrome margin:-3px
IE margin:-2px

方法二
在父元素的css中设置word-spacing负值，或者给父元素添加，{font-size:0}，即将字体大小设为0，那么那个空白符也变成0px，从而消除空隙

浏览器 word-spacing
火狐 word-spacing:-8px
chrome word-spacing:-6px
IE word-spacing:-4px

兼容性方面
很遗憾，IE7以下的浏览器不支持inline-block，但并非完全不支持
解决IE6、IE7兼容性的方法：
1、首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现内联元素，此时layout的特性不会消失。
2、直接设置display:inline，使用zoom:1触发layout。
兼容所有浏览器的方法是：

inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离文本流，而float就会使得元素脱离文本流，且还有父元素高度坍塌的效果
b.相同之处：能在某种程度上达到一样的效果

inline-block模式

浮动模式

如果高度不等还会出现参差不齐的情况

但使用display:inline-block 就不会参差不齐的情况，排列会比较整齐

总结
display：inline-block的布局方式和浮动的布局方式，究竟使用哪个，我觉得应该根据实际情况来决定的：

对于横向排列东西来说，我更倾向与使用inline-block来布局，因为这样清晰，也不用再像浮动那样清除浮动，害怕布局混乱等等。
对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。