HTML中的块级元素和内联元素

在HTML常用标签中提到了块级元素和内联元素，这里为大家讲解一下它们

 

块级元素：

块级元素标签使用后，无论内容是否填充满，会独占一行显示

且具有宽高样式，可以对宽高大小进行设置

内联元素：

内联元素标签使用后，并不影响整行显示效果，不会独占一行显示

没有宽高样式，无法设置其宽高

 

来看看我们熟悉的div和span吧

先定义一个大的宽高为100的灰色背景div，里面放两个宽高为50颜色分别为红色和绿色的div

Markup

<div style="height:100px;width:100px;background-color: gray;">
    <div style="height:50px;width:50px;background-color: red;"></div>
    <div style="height:50px;width:50px;background-color: green;"></div>
</div>

并没有对div进行换行操作，运行效果为下图，小div并没有按照预期的效果排列，而是分别占了大div的一行

同样我们写一个灰色背景宽高100的div，将里面放满span

Markup

<div style="height:100px;width:100px;background-color: gray;">
    <span style="height:100px;width:100px;background-color: red;">span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
    <span>span5</span>
</div>

运行效果如下图，span之间没有进行换行处理

细心的朋友可能已经发现了，第二个案例我还给第一个span加了宽高样式，最后发现并没有生效，只有背景颜色生效了，上文介绍定义宽高的区别就在于此。

转载:https://www.004lu.com/html/15.html