CSS - inline-block

1. display: inline-block的含义？
   元素表现形式是inline——不会独占一行，但是又可以给它定义宽和高。

2. 如果一个元素定义了 display: inline-block但是没有定义宽呢？这个元素的width是多少呢?
   shrink-to-fit——由内部元素决定，但不会超过‘包含块’的宽度(前提是没有定义类似min-width属性)。

3. 典型应用？
   button-使用一个button的时候不定义宽度，按钮文字越多，按钮就越宽。

4. 页面某个文字的内容是动态的，可能是几个字，也可能是一句话。然后希望文字少的时候居中显示，超过一行的时候居左显示，如何实现？

    <div class="box">
        <p class="content">文字内容</p>
    </div>
    <div class="box">
        <p class="content">文字内容-文字内容-文字内容-文字内容-文字内容-文字内容-文字内容</p>
    </div>

    .box {
        text-align: center;// 作用在content元素上
    }
    .content { 
        display: inline-block;
        text-align: left; //作用在content元素内的文字
    }

可以看到文字较少的时候居中显示，换行的时候居左显示。
当文字总宽度没有超过 box宽度的时候content的宽由文字的宽决定，也就是文字总是充满 content 元素的，就像软袋子装水一样，是水决定这个袋子的大小，水此时充满袋子，自然无所谓 居中居左居右了。
但是超过一行就不一样了，因为 content 已经被(第一行)撑开了，所以 content的 left 就对里面的文字起效果了。