HTML学习块级元素DIV以及内联元素SPAN

  在正式学习DIV和SPAN之前我们首先要明确一个概念，什么是块级元素？什么是内联级元素？

  块级元素是指，在开始和结束全部以新行为开始结束的元素，例如标题元素

，

。

  


   
123
新行开始和结束
   

代码解读：在此代码中我们使用了块级元素

和内联元素。按照定义，

之后会自动换行，原本在

后面，但是因为

块级元素所以在

换行以后。

结果如下：

  内联元素是不以新行开始和结束的元素。

    
    
    


    内联元素b和a百度

  代码解读：内联元素和，因为两个都是内敛元素，所以不会自动换行，想要换行的话加上
标记

  在了解了块级元素和内联元素之后，让我们具体来看，DIV和SPAN的使用

 

是一个块级元素，它规定了一片区域是包括了其他HTML元素的容器，你可以在这片区域内进行内容的填充（HTML元素）还有风格设定（配合CSS使用）。

  是一个内联元素，同样规定了一片区域，你可以在这片区域内进行内容的填充还有风格设定，但是这个标签最好是只放置文本

 这两个看起来很相似，但是的确功能差不多，只不过是，

是块级使用起来会自动换行，使用起来不会自动换行。

    
    
    


span
        紧跟着span显示
    
    

        
换行显示
    

 

  那么在具体的代码编写阶段我们是用DIV还是SPAN呢？这个具体要看你要实现的功能了，一般来说是当你要想实现某一个功能的时候（比如要插入一张图片，实现菜单选项），就要用到DIV，有关文本的功能就要用到SPAN了。

  DIV和SPAN可以搭配CSS来实现差异性设计以及炫酷的样式，但是，当CSS规定了某一区域的宽度大小以及背景色，SPAN再引用CSS样式表的时候，就会出现问题。

如下：

.CSS{background-color:aqua;height:300px;width:300px}

  我们新建了一个CSS样式表，它的背景色是aqua，大小是300px*300px，我们再调用span。

    
    
    


span
        紧跟着SPAN显示
    
    

        
换行显示
    

结果页面：

  结果中只表现出了背景色，规定的区域都没有显示出来，这也是为什么只推荐SPAN用作文本功能了