• 技术文章 >web前端 >css教程

    在HTML的网页布局里div与span有什么区别

    php中世界最好的语言php中世界最好的语言2017-12-01 15:03:22原创1428
    很多刚入行的朋友不是很懂这俩个标签的区别,可能大家认为SPAN也是一块,DIV也是一块,同样的作用为啥有俩个标签呢?本篇文章就给大家解答这个疑惑。

    DIV与SPAN的区别与特点

    以下是在没有对开发网页页面设置css样式时候情况下,系统默认情况下的介绍
    div与span区别
    div占用的位置是一行,
    span占用的是内容有多宽就占用多宽的空间距离

    分析:从上图很容易知道“我是内容一;用的div”和“我是内容二;用的div”两个内容外部用的是<div>标签,他们得到样式是占用了一排空间(相当于换行一样);而“我是内容三;用的span”和“我是内容四;用的span”则,文字内容有多宽,就占用多宽距离,使用<span>标签和不使用一样效果。

    span标签小结

    在网页开发的时候使用div和span都可以,通常可以理解为没有什么区别。但注意的是div占用一行,span不会占用一行,内容占多大宽度,span就有多宽。

    扩展与提升

    div内的span无需命名css选择器伪类,例子如下
    如果div的class为yangshi,则对内的span设置css属性则,代码如下
    .yanshi span{属性及属性值}


    相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    CSS里的盒子模型的种类区别

    Css3制作动态开关的效果的实现步骤

    CSS3的content属性实现步骤

    以上就是在HTML的网页布局里div与span有什么区别的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:span HTML 什么
    上一篇:css里的font文字怎么设置 下一篇:CSS的文本字体颜色如何设置
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• 巧用CSS3滤镜制作文字快闪切换动画效果!• 深入了解content-visibility属性,聊聊怎么用它优化渲染性能• 聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变!• 巧用CSS实现各种奇形怪状按钮(附代码)• 聊聊CSS3中的4个逻辑选择器(快速入手)
    1/1

    PHP中文网