區別1

區別2

App.vue代碼

<template><div class="container"><h1>🎯 DIV 和 SPAN 標簽的區別演示</h1><!-- 第一部分：基本區別演示 --><section class="demo-section"><h2>📦 1. 基本布局區別</h2><h3>DIV 標簽（塊級元素）：</h3><div class="demo-div">我是第一個 DIV</div><div class="demo-div">我是第二個 DIV</div><div class="demo-div">我是第三個 DIV</div><p class="explanation">👆 注意：每個 DIV 都獨占一行，即使內容很少</p><h3>SPAN 標簽（內聯元素）：</h3><span class="demo-span">我是第一個 SPAN</span><span class="demo-span">我是第二個 SPAN</span><span class="demo-span">我是第三個 SPAN</span><p class="explanation">👆 注意：所有 SPAN 都在同一行顯示</p></section><!-- 第二部分：尺寸設置區別 --><section class="demo-section"><h2>📏 2. 尺寸設置區別</h2><h3>DIV 可以設置寬高：</h3><div class="sized-div">我是 200px 寬，100px 高的 DIV</div><h3>SPAN 無法設置寬高：</h3><span class="sized-span">我是 SPAN，設置寬高無效</span><p class="explanation">👆 注意：SPAN 的大小完全由內容決定</p></section><!-- 第三部分：實際應用場景 --><section class="demo-section"><h2>💡 3. 實際應用場景</h2><h3>DIV 用于布局和容器：</h3><div class="layout-example"><div class="header">網站頭部</div><div class="content">網站內容區域</div><div class="footer">網站底部</div></div><h3>SPAN 用于文本樣式：</h3><p class="text-example">這是一段普通文本，<span class="highlight">這部分是重點內容</span>，<span class="red-text">這部分是紅色文字</span>，后面又是普通文本。</p></section><!-- 第四部分：混合使用 --><section class="demo-section"><h2>🔄 4. 混合使用示例</h2><div class="card"><div class="card-header"><span class="card-title">用戶信息</span><span class="card-status">在線</span></div><div class="card-body">用戶名：<span class="username">張三</span><br>郵箱：<span class="email">zhangsan@example.com</span></div></div></section></div>
</template><script>
export default {name: 'App'
}
</script><style>
.container {max-width: 800px;margin: 0 auto;padding: 20px;font-family: '微軟雅黑', Arial, sans-serif;
}h1 {color: #2c3e50;text-align: center;margin-bottom: 30px;
}h2 {color: #3498db;border-bottom: 2px solid #3498db;padding-bottom: 5px;
}h3 {color: #27ae60;margin-top: 20px;
}.demo-section {margin-bottom: 40px;padding: 20px;background-color: #f8f9fa;border-radius: 8px;
}/* DIV 演示樣式 */
.demo-div {background-color: #e74c3c;color: white;padding: 10px;margin: 5px 0;border-radius: 4px;text-align: center;
}/* SPAN 演示樣式 */
.demo-span {background-color: #9b59b6;color: white;padding: 8px 12px;margin: 0 5px;border-radius: 4px;
}.explanation {color: #7f8c8d;font-style: italic;margin-top: 10px;padding: 8px;background-color: #ecf0f1;border-radius: 4px;
}/* 尺寸演示 */
.sized-div {width: 200px;height: 100px;background-color: #f39c12;color: white;display: flex;align-items: center;justify-content: center;border-radius: 4px;margin: 10px 0;
}.sized-span {/* 這些設置對 span 無效 */width: 200px;height: 100px;background-color: #1abc9c;color: white;padding: 10px;border-radius: 4px;
}/* 布局示例 */
.layout-example {border: 2px solid #34495e;border-radius: 8px;overflow: hidden;
}.header {background-color: #2c3e50;color: white;padding: 15px;text-align: center;
}.content {background-color: #ecf0f1;padding: 20px;min-height: 60px;
}.footer {background-color: #95a5a6;color: white;padding: 10px;text-align: center;
}/* 文本樣式示例 */
.text-example {font-size: 16px;line-height: 1.6;padding: 15px;background-color: white;border-radius: 4px;border: 1px solid #ddd;
}.highlight {background-color: #f1c40f;padding: 2px 6px;border-radius: 3px;font-weight: bold;
}.red-text {color: #e74c3c;font-weight: bold;
}/* 卡片示例 */
.card {border: 1px solid #ddd;border-radius: 8px;overflow: hidden;background-color: white;
}.card-header {background-color: #3498db;color: white;padding: 15px;display: flex;justify-content: space-between;align-items: center;
}.card-title {font-size: 18px;font-weight: bold;
}.card-status {background-color: #27ae60;padding: 4px 8px;border-radius: 12px;font-size: 12px;
}.card-body {padding: 20px;line-height: 1.8;
}.username {color: #2c3e50;font-weight: bold;
}.email {color: #3498db;font-style: italic;
}
</style>