span的使用
??? 为什么给span定义高度和宽度后,它的宽度和高度仍然没有变化,仿佛失效了一样?
??? 其实这个问题很简单——那就是因为span属于内联元素,而内联元素是忽略宽度和高度的,解决的办法也很简单,就是利用css将span变为盒装元素即可。
下面举例说明一下:
???
??? 首先给出包含span标签的Html代码:
??? <div alt="span的施用">???
??? 原因上面也说到了,目前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后面跟随了元素则会和它在同一行显示,此处要绝对注意。