div与span的区别:
div标签属于块级元素,span标签属于行内元素,使用对比效果如下:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>111</title> 6 <style> 7 div{ 8 background-color: #CC99CC; 9 color: blue;10 width: 400px;11 }12 span{13 background-color: #CC99CC;14 color: blue;15 width: 400px;16 }17 </style>18 </head>19 <body>20 <div>div</div>21 <div>div</div>22 <span>span</span>23 <span>span</span>24 </body>25 </html>
另外,在html页面中,无法直接设置span的高度和宽度,如果需要改变其宽高,就需要将其转变为块体元素(block)或行内块体元素(inline-block):
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>111</title> <style> .class1{ background-color: #CC99CC; color: blue; width: 400px; height: 50px; } .class2{ background-color: #CC99CC; color: blue; width: 400px; height: 50px; display:block; } </style></head><body> <span class="class1">示例</span> <span class="class2">示例</span></body></html>