html塊狀元素、內聯元素

block元素的特色： 
    * 老是另起一行開始； 
    * 高度，行高以及頂、底邊距均可控制； 
    * 寬度缺省是它所在容器的100%，除非設定一個寬度。 
inline元素的特色： 
    * 和其它元素都在一行上； 
    * 高度，行高以及頂、底邊距不可改變； 
    * 寬度就是它所容納的文字或圖片的寬度，不可改變。

 

◎塊元素(block element) 一般做爲其它元素的容器，它能夠容納內聯元素和其它塊元素。 
咱們知道默認狀況下，塊元素會順序以每次另起一行的方式往下排，而經過CSS控制其樣式，咱們能夠改變這種默認佈局模式，把塊元素擺放到你想要的位置上 去。須要指出的是，table標籤也是塊元素的一種，基於table表格和基於CSS+DIV的佈局，在使用者看來除了頁面載入速度的差異（table在 全部內容元素加載完成後才顯示），沒有其它的差異。可是從頁面的源代碼來看，這種差別就很是大了。基於良好結構理念設計的CSS佈局源碼，至少能讓沒有 web開發經驗的用戶很容易找到連續的頁面內容。從這個角度來講，CSS layout code應該有更好的美學體驗。 
咱們能夠把模塊化的DIV想象成一個個box，而後把它們按本身的意願排列組成完整的內容，網頁佈局設計就是遵循了一樣的模式。 
塊元素(block element) HTML標籤分類明細

 

◎內聯元素(inline element) 通常都是基於語義級(semantic)的基本元素，只能容納文本或者其它內聯元素。 
爲了比較明確的表現出 block 與 inline 的區別，咱們能夠利用它們各自的表明元素div和span的演示進行說明：

XXXXXXXXX 
This's a DIV layout 
XXXXXXXXX 
div另起一行，它的形狀不受內部文字的影響 
XXXXXXXThis's a span layoutXXXXXXX 全部元素在一行，span恰好包容文字