block、inline、inline-block 区别

前言

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

blockinline区别

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

inline坑点

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

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

inline-blockblockinline区别

  • 对比inlineinline-block可以设置widthheightmarginpaddingtopbottom
  • blockinline-block只是不用不会新起一行,而且可以包含blockinlineinline-block

inlineinline-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-spacingword-spacing等等,不过总是需要设置负值或者使用起来过于麻烦(比如table的方法),方法总是多样的,私认为了解即可。