css中的內聯對象與塊對象

 css中的內聯對象與塊對象

在用CSS做頁面的時候，我們總是會想到塊對象和內聯對象，那到底指的是什麼呢？
為什麼說加上float或display：block就是塊對象了呢？

塊對象預設寬度是100%（繼承自父元素），如果沒有採用“float:left/right;”樣式，相鄰的兩個塊對象就會分排在不同的兩行上。

內聯對象的寬度取決於其內部元素的寬度與padding樣式值之和，不可直接指定其寬度與高度（“display:block;”、“float:left/right;”強行轉換後可以定義），相鄰的兩個內聯對象會排在同一行上。

  
從這兩點就應該可以看出來塊對象和內聯對象兩者的區別，關於為什麼加上float就成為塊對象了，是因為float預設的就是display：block; display:inline是表示內聯對象；display:block表示塊對象。

以下更清楚的告訴你兩者的區別：

什麼是內聯對象，什麼是塊對象？

所有可視的文檔對象都是塊對象(block element)或者內聯對象(inline element)。例如， div 是一個塊對象，span 是一個內聯對象。

塊對象的特徵是從新的一行開始且能包含其他塊對象和內聯對象。從新的一行開始：比如div就是前後斷行；
內聯對象被呈遞時不會從新行開始，能夠包含其他內聯對象和資料。內聯可以這樣理解：不從新的一行開始，直接從內容裡面，接著往後走。。。是指它能被別的對象內聯。。。。

==========================
相關資訊參考：css display參數

block   : CSS1   塊對象的預設值。將對象強製作為塊對象呈遞，為對象之後添加新行
none   : CSS1   隱藏對象。與 visibility 屬性的hidden值不同，其不為被隱藏的對象保留其物理空間（頁面物理尺寸大小空間）
inline   : CSS1   內聯對象的預設值。將對象強製作為內聯對象呈遞，從對象中刪除行

改變此屬性值（即：display）對其周圍內容布局的影響可能是：

屬性值設為 block 的在對象後面添加新行。
屬性值設為 inline 的從對象中刪除一行。
屬性值設為 none 的對象隱藏並釋放其在文檔中的物理空間(頁面物理尺寸大小空間)。