css之display属性之inline-block布局实现详解
CSS display 属性
注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更⾼版本）⽀持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。所有主流浏览器都⽀持 display 属性。
定义和⽤法
display 属性规定元素应该⽣成的框的类型。
说明
这个属性⽤于定义建⽴布局时元素⽣成的显⽰框类型。对于 HTML 等⽂档类型，如果使⽤ display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显⽰层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
注释：CSS2 中有值 compact 和 marker，不过由于缺乏⼴泛的⽀持，已经从 CSS2.1 中去除了。
默认值：inline
继承性：no
版本：CSS1
JavaScript 语法：object.style.display="inline"
1.解释⼀下display的⼏个常⽤的属性值，inline ， block， inline-block
inline（⾏内元素）：使元素变成⾏内元素，拥有⾏内元素的特性，即可以与其他⾏内元素共享⼀⾏，不会独占⼀⾏. 不能更改元素的height，width的值，⼤⼩由内容撑开. 可以使⽤padding上下左右都有效，margin只有left和right产⽣边距效果，但是top 和bottom就不⾏.block（块级元素）：使元素变成块级元素，独占⼀⾏，在不设置⾃⼰的宽度的情况下，块级元素会默认填满⽗级元素的宽度. 能够改变元素的height，width的值. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产⽣边距效果. inline-block（融合⾏内于块级）：结合了inline与block的⼀些特点，结合了上述inline的第1个特点和block的第2,3个特点.⽤通俗的话讲，就是不独占⼀⾏的块级元素。如图:
图⼀:
图⼆：
两个图可以看出，display：inline-block后块级元素能够在同⼀⾏显⽰，有⼈这说不就像浮动⼀样吗。没错，display：inline-block的效果⼏乎和浮动⼀样，但也有不同，接下来讲⼀下inline-block和浮动的
⽐较。
2.inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离⽂本流，⽽float就会使得元素脱离⽂本流，且还有⽗元素⾼度坍塌的效果
b.相同之处：能在某程度上达到⼀样的效果
  我们先来看看这两种布局：
图⼀：display：inline-block
图⼆：对两个孩⼦使⽤float：left，我在上⼀篇浮动布局讲过，这是⽗元素会⾼度坍塌，所以要闭合浮动，对box使⽤overflow：hidden，效果如下：
>>乍⼀看两个都能做到⼏乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下⾯再讲）
  c.浮动布局不太好的地⽅：参差不齐的现象，我们看⼀个效果：
图三：margin属性怎么用
图四：
>>从图3,4可以看出浮动的局限性在于，若要元素排满⼀⾏，换⾏后还要整齐排列，就要⼦元素的⾼度⼀致才⾏，不然就会出
现图三的效果，⽽inline-block就不会。
3.inline-block存在的⼩问题：
  a.上⾯可以看到⽤了display:inline-block后，存在间隙问题，间隙为4像素，这个问题产⽣的原因是换
⾏引起的，因为我们写标签时通常会在标签结束符后顺⼿打个回车，⽽回车会产⽣回车符，回车符相当于空⽩符，通常情况下，多个连续的空⽩符会合并成⼀个空⽩符，⽽产⽣“空⽩间隙”的真正原因就是这个让我们并不怎么注意的空⽩符。
  b.去除空隙的⽅法：
  1.对⽗元素添加，{font-size:0}，即将字体⼤⼩设为0，那么那个空⽩符也变成0px，从⽽消除空隙
  现在这种⽅法已经可以兼容各种浏览器，以前chrome浏览器是不兼容的
图⼀：
  c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理⼀下：
  在ie6/7下：
  对于⾏内元素直接使⽤{dislplay:inline-block;}
  对于块级元素：需添加{display:inline;zoom:1;}
4.总结:
display：inline-block的布局⽅式和浮动的布局⽅式，究竟使⽤哪个，我觉得应该根据实际情况来决定的：
a.对于横向排列东西来说，我更倾向与使⽤inline-block来布局，因为这样清晰，也不⽤再像浮动那样清除浮动，害怕布局混乱等等。
b.对于浮动布局就⽤于需要⽂字环绕的时候，毕竟这才是浮动真正的⽤武之地，⽔平排列的是就交给inline-block了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。