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