span是块元素吗？

span不是块元素，而是内联元素（行内元素），可以对文档中的行内元素进行组合。span只是把内容定义成一个整体进行操作，不影响布局和显示，而且span没有什么实用特性，它的作用是围绕HTML代码中的其他元素，为其指定样式。

（推荐教程：html教程）

span不是块元素，而是内联元素（行内元素），主要用于容纳文字。span用于对文档中的行内元素进行组合。

span只是把内容定义成一个整体进行操作，不影响布局和显示，而且span没有什么实用特性，它的作用便是围绕HTML代码中的其他元素，为其指定样式。

span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 span> 应用样式，那么 span> 元素中的文本与其他文本不会任何视觉上的差异。

span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

例：

!DOCTYPE html>
    html>
    head>
     meta charset="utf-8">
     /head>
    body>
    p>
    我的母亲有 span style="color:blue;
    font-weight:bold">
    蓝色/span>
     的眼睛，我的父亲有 span style="color:darkolivegreen;
    font-weight:bold">
    碧绿色/span>
     的眼睛。/p>
    /body>
    /html>
    

效果图：

块元素、内联元素、内联块元素：

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

1、块元素：

块元素，也可以称为行元素，布局中常用的标签，如：div、p、ul、li、h1-h6等等都是块元素，它在布局中的行为：

（1）支持全部的样式

（2）如果没有设置宽度，默认的宽度为父级宽度100%

（3）盒子占据一行、即使设置了宽度

代码：

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    块元素/title>
        style type="text/css">
        .box{
                background-color: gold;
                /*width:300px;
    */            /*height:200px;
*/        }
        .box2{
                background-color: green;
                /*width:300px;
    */            /*height:200px;
*/        }
        /style>
    /head>
    body>
        div>
    div元素/div>
        p>
    p元素/p/body>
    /html>
    

页面显示效果：

2、内联元素：

内联元素，也可以称为行内元素，布局中常用的标签，如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

（1）支持部分样式（不支持宽、高、margin上下、padding上下）

（2）宽高由内容决定

（3）盒子并在一行

（4）代码换行，盒子之间会产生间距

（5）子元素是内联元素，父元素可以用text-align属性设置子元素水平对方方式

解决内联元素间隙的方法：

（1）去掉内联元素之间的换行

（2）将内联元素的父级设置font-size为0，内联元素自身再设置font-size

代码：

!DOCTYPE html>
    html>
    head>
        meta charset="UTF-8">
        title>
    内联元素/title>
        style type="text/css">
        .box{
                width:500px;
                height:400px;
                border:1px solid #000;
                margin:50px auto 0;
                font-Size:0;
  /* 解决内联元素间隙 */        }
        .box div{
                width:100px;
                height:100px;
                margin:10px;
                background-color:gold;
        }
        .box a{
                background-color:gold;
                /*            width:300px;
                height:200px;
                设置宽高完全不起作用 */            /*            margin:100px 20px;
                没有上下的边距，只有左右的边距 */            /*padding:10px 10px;
    */            /* padding的上下不应该起作用的，却出现了bug */            font-size:16px;
/* 解决内联元素间距 */        }
        .box2{
                width:500px;
                height:100px;
                border:1px solid #000;
                margin:50px auto 0;
                text-align:center;
        }
        /style>
    /head>
    body>
        div>
            div>
    /div>
            div>
    /div>
            a href="#">
    链接文字一/a>
    a href="#">
    链接文字二/a>
      /* 取消间隙 */        a href="#">
    链接文字三/a>
            a href="#">
    链接文字四/a>
            a href="#">
    链接文字五/a>
        /div>
        div>
            a href="#">
    链接文字/a>
        /div>
    /body>
    /html>
    

3、内联块元素：

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

（1）支持全部样式

（2）如果没有设置宽高，宽高由内容决定

（3）盒子并在一起

（4）代码换行，盒子会产生间距

（5）子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联元素，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

更多编程相关知识，请访问：编程学习网站！！

以上就是span是块元素吗？的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！