zoukankan      html  css  js  c++  java
  • div和span显示在同一行

    div和span标签的区别

    div  是块级元素标签,独占一行,后面跟的内容换行显示

    span  是内联元素标签,后面可以跟其他显示内容,不独占一行

    display属性可以改变内联元素和块级元素的状态,实现两种元素的互换

    1.div变成内敛元素

    代码展示

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="background-color: turquoise;">123123</div>
        <span style="background-color: red;">123123</span>
    </body>
    </html>

    显示效果如图

    添加给div标签添加属性display属性:inline,将div变成一个内联元素

    代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="background-color: turquoise; display: inline">123123</div>
        <span style="background-color: red;">123123</span>
    </body>
    </html>

    显示效果

    2.span变成块级元素

    举例:三个span标签是

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span style="background-color: turquoise;">123123</span>
        <span style="background-color: red;">123123</span>
        <span style="background-color: blue;">123123</span>
    </body>
    </html>

    显示如图

    给span添加display属性:block

    代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <span style="background-color: turquoise;">123123</span>
        <span style="background-color: red; display: block">123123</span>
        <span style="background-color: blue;">123123</span>
    </body>
    </html>

    显示结果

    转载于:https://www.cnblogs.com/kuoAT/p/6706327.html

  • 相关阅读:
    拦截器-监听器-过滤器的区别
    实例Rest风格+SpringMVC+中文乱码解决
    Nginx功能详细介绍(大而全)
    Nginx应⽤场景之反向代理
    SpringMVC参数传递之日期类型
    SpringMVC请求参数绑定回顾
    数据输出机制之Model、Map及ModelMap回顾
    ReactHook快速上车
    Chrome性能调优技巧
    移动端适配的最佳实践
  • 原文地址:https://www.cnblogs.com/twodog/p/12140868.html
Copyright © 2011-2022 走看看