span的使用

    为什么给span定义高度和宽度后，它的宽度和高度仍然没有变化，仿佛失效了一样？

    其实这个问题很简单——那就是因为span属于内联元素，而内联元素是忽略宽度和高度的，解决的办法也很简单，就是利用css将span变为盒装元素即可。

下面举例说明一下：
   

    首先给出包含span标签的Html代码：
    <div class="spanex">
        <span>span标签的宽度高度测试</span>
    </div>

    CSS代码：
    <style type="text/css">
    .spanex {

        background:#000;

        color:#FFF;

        width:200px;

        height:100px;

        font-size:12px;

    }
    .spanex span {

        background:#FFF;

        color:#000;

        width:180px;

        height:30px;

    }
   </style>

    上面的div中包含了一个span标签，在css中定义了span的宽度为100像素，高度为30像素，但是span的宽度确实随文字的个数而增加的，不受css的宽度控制，如图一所示。

   

    原因上面也说到了，目前span还是内联元素，所以不受宽高限制，那么，只有将它定义为盒装元素就可以控制了。将内联元素定义为盒装元素的方法有两种：

    1.直接使用显示属性display将其定义为盒装元素；
    2.使用浮动属性float将其自动定义为盒装元素；

    使用第一种方法只需要将上面的.spanex span稍做改动即可完成，有原来的改为：

    .spanex span {

        background:#FFF;

        color:#000;

        display:block;

        width:180px;

        height:30px;

    }

    使用第二种方法则改为：

    .spanex span {

        background:#FFF;

        color:#000;

        float:left;   

        width:180px;

        height:30px;

    } 
    效果如图二中所示。

    虽然二者在这里的效果相同，但它们却又一点区别，第一种方法写出的span是清除两侧浮动的，也就是如果后面跟了任何元素都会折回到下一行显示；而第二种利用浮动的定义方法，如果span后面跟随了元素则会和它在同一行显示，此处要绝对注意。