盒子模型

文字对其线

<!-- log -->
<div><span id="testSpan1">一二三</span>四五六</div>
<hr>
<div><span id="testSpan2">一二三</span>四五六</div>
<style>
  #testSpan1 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    font-size: 2em;
  }
  #testSpan2 {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
    font-size: 2em;
    /* 可改变竖向位置 */
    vertical-align: 30px;
  }
</style>

隐式转化inline-block

要想为span标签指定宽度/高度，必须修改其display属性，但是有时候我们也可以不显式修改。下面是一个例子。

<!-- log-after -->
<span id="span1">span1</span>
<span id="span2">span2</span>
<div class="clear"></div>
<style>
  #span1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }

  #span2 {
    /* 或者position: absolute */
    float: right;
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

解释：
position: absolute;和 float会把 display 属性值 变为inline-block