div和span的區別以及行內元素和塊元素的轉換？
阿新 • • 發佈：2019-01-25
div和span的區別以及行元素和塊元素的轉換？
相同點：
div和span都可以將HTML元素組合起來，類似一個盒子將裡面的內容當作一個整體來處理，從而實現整體作用效果，提高效率。
不同點：
div是塊級元素，是可用於組合其他HTML元素的容器，其常用的用途是文件佈局，主要用於頁面的排版。
span是內聯元素（行內元素），主要用於容納文字。span只是把內容定義成一個整體進行操作，不影響佈局和顯示，而且span沒有什麼實用特性，它的作用便是圍繞HTML程式碼中的其他元素，為其指定樣式。
注意點：
塊元素和行內元素不是不可改變的，只要給塊元素定義display:inline，塊元素便成為了內嵌元素，給內嵌元素定義display:block
舉例說明：
①div例項
<!DOCTYPE html> <html> <head> <style> .text { background-color:black; color:white; margin:10px; padding:10px; } </style> </head> <body> <div class="text"> <h2>小學</h2> <p>小學生</p> </div> <div class="text"> <h2>中學</h2> <p>中學生</p> </div> <div class="text"> <h2>大學</h2> <p>大學生</p> </div> </body> </html>
②span例項
<!DOCTYPE html>
<html>
<head>
<style>
span.blue {
color:blue;
}
</style>
</head>
<body>
<h1>進行<span class="blue">例項</span>測試</h1>
</body>
</html>
③行內元素塊元素變換例項
<!DOCTYPE html> <html> <body> <h1>測試<span style="display:block;color:blue;">例項</span>測試</h1> </body> </html>
