在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加了宽高样式,最后发现并没有生效,只有背景颜色生效了,上文介绍定义宽高的区别就在于此。