div与span_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:33:39
Original
1501 Leute haben es durchsucht

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>
Nach dem Login kopieren

另外,在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>
Nach dem Login kopieren

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage