CSS之使⽤display：inline-block来布局
如果你觉得困难，那也许就是在进步
css之display:inline-block布局
1.解释⼀下display的⼏个常⽤的属性值，inline ， block， inline-block
inline（⾏内元素）:
1. 使元素变成⾏内元素，拥有⾏内元素的特性，即可以与其他⾏内元素共享⼀⾏，不会独占⼀⾏.
2. 不能更改元素的height，width的值，⼤⼩由内容撑开.
3. 可以使⽤padding上下左右都有效，margin只有left和right产⽣边距效果，但是top和bottom就不⾏.
block（块级元素）:
1. 使元素变成块级元素，独占⼀⾏，在不设置⾃⼰的宽度的情况下，块级元素会默认填满⽗级元素的宽度.
2. 能够改变元素的height，width的值.
3. 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产⽣边距效果.
inline-block（融合⾏内于块级）:
1. 结合了inline与block的⼀些特点，结合了上述inline的第1个特点和block的第2,3个特点.
2. ⽤通俗的话讲，就是不独占⼀⾏的块级元素。如图:
图⼀:
图⼆：
两个图可以看出，display：inline-block后块级元素能够在同⼀⾏显⽰，有⼈这说不就像浮动⼀样吗。没错，display：inline-block的效果⼏乎和浮动⼀样，但也有不同，接下来讲⼀下inline-block和浮动的⽐较。
2.inline-block布局 vs 浮动布局
a.不同之处：对元素设置display：inline-block ，元素不会脱离⽂本流，⽽float就会使得元素脱离⽂本流，且还有⽗元素⾼度坍塌的效果
b.相同之处：能在某程度上达到⼀样的效果
  我们先来看看这两种布局：css实现三列布局
图⼀：display：inline-block
图⼆：对两个孩⼦使⽤float：left，我在上⼀篇浮动布局讲过，这是⽗元素会⾼度坍塌，所以要闭合浮动，对box使⽤overflow：hidden，效果如下：>>乍⼀看两个都能做到⼏乎相同的效果，（仔细看看display：inline-block中有间隙问题，这个留到下⾯再讲）
  c.浮动布局不太好的地⽅：参差不齐的现象，我们看⼀个效果：
图三：
图四：
>>从图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小时内删除。