block、inline、inline-block 区别

,

前言

这是一道常见的面试题目，但是平时也经常在用，假装我在面试，看看能写出多少东西。

block和inline区别

  • 默认的情况下，block会新起一行；
    inline不会，会在同一行水平排列，也会自动换行
  • block的宽度是父元素的 100%；
    inline，宽度取决于内容，设置 width 无效，height 无效（line-height 有效），margin 和 padding top bottom 无效
  • block可以包含inline和其他block
    inline无法包含block，可以包含inline
    这个是全网都这样说，但是实际上现代浏览器早就已经做了兼容处理，一样是可以正常使用的。

inline坑点

最常见的问题可能就是img下面存在空白，这是基线问题，解决方法有多样

  • 设置display:block
  • 定义vertical-align
  • 定义font-size:0

inline-block和block，inline区别

  • 对比inline，inline-block可以设置width，height和margin，padding的top和bottom
  • block，inline-block只是不用不会新起一行，而且可以包含block，inline和inline-block

inline和inline-block坑点

1
2
3
4
<div class="container">
  <a href="#" class="foo">foo</a>
  <a href="#" class="bar">bar</a>
</div>

上述html会看到 foo 和 bar 之间是有一个空格的，原因是html中把所有换行符，空格，和制表符都合并为一个空白符，导致如果直接使用会在元素之间存在空格，解决方法有多样：

  • 这个问题原因出现就是标签之间的空白符，所以如果我们不换行，标签之间不换行就可以解决了，但是可读性和编写体验很差

  • margin负值，这个就…要考虑外部环境影响，浏览器之间也有可能出现不同，所以不建议

  • 舍弃闭合标签，就是把</a>取消不写，浏览器找不到闭合标签也不能计算标签之间的空白符，但是如果要兼容 IE6/7 最后一个闭合标签需要加上，同样地这个方法编写体验很差…

  • 修改字体大小，这个方法在我看来是最好的办法，逻辑上或者兼容性处理都是最好的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .container {
      font-size: 0;
      // Chrome 默认最小字体限制解决兼容
      -webkit-text-size-adjust: none;

      a {
        font-size: 12px;
      }
    }

当然网上也有很多其他的办法，比如letter-spacing，word-spacing等等，不过总是需要设置负值或者使用起来过于麻烦（比如table的方法），方法总是多样的，私认为了解即可。

推荐