div和span的区别以及行元素和块元素的转换？

相同点：

div和span都可以将HTML元素组合起来，类似一个盒子将里面的内容当作一个整体来处理，从而实现整体作用效果，提高效率。

不同点：

div是块级元素，是可用于组合其他HTML元素的容器，其常用的用途是文档布局，主要用于页面的排版。

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

注意点：

块元素和行内元素不是不可改变的，只要给块元素定义display:inline，块元素便成为了内嵌元素，给内嵌元素定义display:block就成为了块元素。

举例说明：

①div实例

<!DOCTYPE html>
<html>
<head>
<style>
    .text {
        background-color:black;
        color:white;
        margin:10px;
        padding:10px;
     }	
</style>
</head>
<body>
    <div class="text">
        <h2>小学</h2>
        <p>小学生</p>
    </div> 

    <div class="text">
        <h2>中学</h2>
        <p>中学生</p>
    </div>

    <div class="text">
        <h2>大学</h2>
        <p>大学生</p>
    </div>
</body>
</html>


②span实例

<!DOCTYPE html>
<html>
<head>
    <style>
        span.blue {
            color:blue;
         }
    </style>
</head>
<body>
    <h1>进行<span class="blue">实例</span>测试</h1>
</body>
</html>

③行内元素块元素变换实例

<!DOCTYPE html>
<html>
<body>
    <h1>测试<span style="display:block;color:blue;">实例</span>测试</h1>
</body>
</html>

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生