Home > Article > Web Front-end > div与span_html/css_WEB-ITnose
div与span_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:391501browse
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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：再次理解HTTP请求过程_html/css_WEB-ITnoseNext article：Webpack基本用法_html/css_WEB-ITnose