css案例学习之div与span的区别
生活随笔
收集整理的這篇文章主要介紹了
css案例学习之div与span的区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼：
<html> <head> <title>div 標(biāo)記范例</title> <style type="text/css"> div.widthstyle{font-size:18px; /* 字號大小 */font-weight:bold; /* 字體粗細(xì) */font-family:Arial; /* 字體 */color:#FFFF00; /* 顏色 */background-color:#0000FF; /* 背景顏色 */text-align:center; /* 對齊方式 *//*width:300px;*/ /* 塊寬度 默認(rèn)寬度為一行，兩邊有點(diǎn)距離*/height:100px; /* 塊高度 */margin-top: 10px; }span{font-size:18px; /* 字號大小 */font-weight:bold; /* 字體粗細(xì) */font-family:Arial; /* 字體 */color:#FFFFFF; /* 顏色 */background-color:#0000FF; /* 背景顏色 */text-align:center; /* 對齊方式 */width:300px; /* 塊寬度 span沒有寬度的概念 */height:100px; /* 塊高度 span沒有高度的概念*/padding-left:10px;margin-left:10px; } </style> </head> <body><div class="widthstyle">這是一個div標(biāo)記1</div><div class="widthstyle">這是一個div標(biāo)記2</div><div class="widthstyle">這是一個div標(biāo)記3</div><span>這是一個span標(biāo)記1</span><span>這是一個span標(biāo)記2</span><span>這是一個span標(biāo)記3</span><div><span>這是一個div中的span標(biāo)記1</span><span>這是一個div中的span標(biāo)記2</span><span>這是一個div中的span標(biāo)記3</span></div><div><span>這是一個單獨(dú)div中的span標(biāo)記1</span></div><div><span>這是一個單獨(dú)div中的span標(biāo)記2</span></div><div><span>這是一個單獨(dú)div中的span標(biāo)記3</span></div> </body> </html>說明：div默認(rèn)占據(jù)一行，兩邊有所空隙。可以設(shè)置寬度、高度，即使是設(shè)置寬度了，div還是占據(jù)一行，只是盒子的內(nèi)容空間小了。
span是行內(nèi)元素，沒有寬度和高度的概念。放在一個單獨(dú)的div中，才會獨(dú)自占據(jù)一行位置，這個位置也是div爭取回來的。
總結(jié)
以上是生活随笔為你收集整理的css案例学习之div与span的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ECMAScript 6 未来前景
- 下一篇： 使用Screen使SSH关闭后Meteo