div和span標簽的區別
div 是塊級元素標簽，獨占一行，后面跟的內容換行顯示
span 是內聯元素標簽，后面可以跟其他顯示內容，不獨占一行
display屬性可以改變內聯元素和塊級元素的狀態，實現兩種元素的互換
1.div變成內斂元素
代碼展示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background-color: turquoise;">123123</div> <span style="background-color: red;">123123</span> </body> </html>
顯示效果如圖
添加給div標簽添加屬性display屬性：inline，將div變成一個內聯元素
代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background-color: turquoise; display: inline">123123</div> <span style="background-color: red;">123123</span> </body> </html>
顯示效果
2.span變成塊級元素
舉例：三個span標簽是
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <span style="background-color: turquoise;">123123</span> <span style="background-color: red;">123123</span> <span style="background-color: blue;">123123</span> </body> </html>
顯示如圖
給span添加display屬性：block
代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <span style="background-color: turquoise;">123123</span> <span style="background-color: red; display: block">123123</span> <span style="background-color: blue;">123123</span> </body> </html>
顯示結果
轉載於:https://www.cnblogs.com/kuoAT/p/6706327.html