<span> 标签是被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了，使用相当频繁，但我们往往很少对SPAN设定样式，一般也没什么必要，大多数都留给DIV老朋友了。 
    在做"善良公社"项目时，用到了SPAN，因为是用来实现放块效果，所以给它定义了固定宽度，本以为胸有成竹的事，可执行网页时发现设定的宽度没有效果，让我郁闷了几分钟，看似很简单的样式定义尽然是无效。后来网上搜索了相关资料，是这么解释的：CSS中的width属性并不总是有效的，如果对象是inline对象，width属性就会被忽略。Firefox和IE原来是遵循了标准才这样做的。 
    原因知道后，解决方案也就出来了，添加代码所示： 



style="width:600px;text-align:left;display:inline-block;"




    效果对比 
















 
         下面对<span>标签进行一下详细介绍。
    原始代码：




<style type="text/css">
    .sc {
        width: 300px;
        list-style: none;
        font-size: 15px;
    }

        .sc li {
            list-style: none;
            width: 100%;
            margin: 10px 0px 0px 0px;
        }

        .sc span {
            width: 100px;
            text-align: center;
            display: inline-block;
            background: #C00;
            color: #FFF;
        }
</style>
<div class="sa">
    <span>张连海</span>
    <span>张 连 海</span>
</div>








    效果如下：








一、形如<span>ABC</span>独立行设置SPAN为固定宽度
    方法如下：




span {width:60px;text-align:center; display:block; }





    测试实例：




<style type="text/css">
    .sa span {
        width: 100px;
        text-align: center;
        display: block;
        background: #C00;
        margin: 10px 0px 0px 0px;
        color: #FFF;
        font-size: 15px;
    }
</style>
<div class="sa">
    <span>张连海</span>
    <span>张 连 海</span>
</div>





    测试效果：










二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度
    方法如下：



span{width:60px; text-align:center;  display:block;float:left;}





    测试实例：




<style type="text/css">
    .sb {
        width: 300px;
        list-style: none;
        font-size: 15px;
    }

        .sb li {
            list-style: none;
            width: 100%;
            margin: 10px 0px 0px 0px;
        }

        .sb span {
            width: 100px;
            text-align: center;
              display:block;
            float: left;
            background: #C00;
            color: #FFF;
        }
</style>
<ul class="sb">
    <li><span>张连海</span>博客</li>
    <li><span>张 连 海</span>欢 迎 光 临</li>
</ul>





    测试效果：










三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度
    方法如下：




span{width:60px; text-align:center; display:inline-block;}





    测试实例：




<style type="text/css">
    .sc {
        width: 300px;
        list-style: none;
        font-size: 15px;
    }

        .sc li {
            list-style: none;
            width: 100%;
            margin: 10px 0px 0px 0px;
        }

        .sc span {
            width: 100px;
            text-align: center;
            display: inline-block;
            background: #C00;
            color: #FFF;
        }
</style>
<ul class="sc">
    <li>Welcome to <span>张连海</span>博客</li>
    <li>Welcome to <span>张 连 海</span>欢 迎 光 临</li>
</ul>





    测试效果：










    
提示：完美兼容就是把display属性设为inline-block，同时也可兼容前两种情况。


四、block，inline，inline-block之间区别
    display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性；
    display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性；
    display:inline-block;——“全”可定制属性的元素特性； 


五、如何设置让SPANfloat:right不换行
    1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行？
    如果对span使用float属性，在IE下会导致span换到下一行，Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐，即可实现。




li {position:relative;}
li span{position:absolute;right:0px;}






    2、反着写<span>也比较方便
    比如写做<li><span>AAA</span>BBB</li>，这样把AAA放到SPAN里，BBB放到外面。只需要：




li {text-align:right;}
li span{float:left;}

我是一名web小白，目前现在是一名初中生，这是我第一次写博客，目前，我也是正在自学web前端。这是我对定位和浮动元素的个人看法，请大家在品论去建议建议，我以后会更努力的。我也不会什么写作文，布局之类的，请大家见解！
行内元素
什么是行内元素呢？

1.无法设置width和height。

2.只对margin属性left和right有效，top和bottom无效。对padding的上下左右都有效

3.不能独占一行。

我们可以用css属性中的display：inline；来转换成行内元素
行内元素的标签有哪些？
span，b，i，sub，sup，a，strong，img，input等。
块元素
什么是块元素呢？

1.可以设置width和height。

2.margin属性的上下左右都有效，padding属性的上下左右也是都有效。

3.独占一行的。

我们可以用css中的display：block属性来转换成块级元素。
块元素的标签有哪些？
我们最常见的div，p，ul，li，h1到h6，hr，from表单等。
行内块元素
什么是行内块元素呢？

1.可以设置width和height。

2.不独占一行。

我们可以用css中的display：inline-block属性来转换成行内块元素。
已经跟你们说了什么是行内元素，块元素和行内块元素，接下来就可以说浮动和position：absoulte来变成行内块元素。
<span class="span1">我是个span行内元素</span>
<div class="div1">我是div块元素</div>

.span1{
            width: 100px;
            height: 100px;
      		background-color: red;
      	}
 .div1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }



因为div是一个块元素，他需要独占一行，所以没有在span后边。

此时我们对span元素设置的width和height都没有生效。
接下来我们改变css一下代码。
.span1{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }



此时span元素width和height的属性生效了，形成了行内块元素。给span元素定位属性时，span元素脱离了文档流，所以div元素会上去，此时span元素覆盖在div元素上边。
接下来我们去试一下加浮动会不会是一样的效果。


结果是一样的，变成了行内块元素，仔细的人应该都开出来了，他的文字变了，这种情况我就想问下大家为什么它的文字会环绕这个span元素呢？
那我就跟大家讲一下浮动属性吧，其实最初的浮动属性用的是图像，出现浮动的目的就是让文本环绕图像，后来css就允许用于其他元素了。
有许多小伙伴用了浮动或是position：absolute属性后，他的页面效果就不是想像的那样了，很着急，也找不出错误，看了我这篇文章就知道自己的错误了吧。
感谢大家的阅读，多点点赞，支持支持我，这是我的第一篇文章。

有兴趣的也可以加Q群1056384633可以讨论讨论。