Heim > Artikel > Web-Frontend > div与span_html/css_WEB-ITnose
div与span_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:391499Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：再次理解HTTP请求过程_html/css_WEB-ITnoseNächster Artikel：Webpack基本用法_html/css_WEB-ITnose