你的位置:首页 > 网页设计

[网页设计]div与span


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>

View Code

 

另外,在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>

View Code