CSS區塊層級元素和行內元素

標籤：

根據CSS規範的規定，每一個網頁元素都有一個display屬性，用於確定該元素的類型，每一個元素都有預設的display屬性值，比如div元素，它的預設display屬性值為“block”，成為“塊級”元素(block-level)；而span元素的預設display屬性值為“inline”，稱為“行內”元素。div這樣的區塊層級元素，就會自動佔據一定矩形空間，可以通過設定高度、寬度、內外邊距等屬性，來調整的這個矩形的樣子；與之相反，像“span”“a”這樣的行內元素，則沒有自己的獨立空間，它是依附於其他區塊層級元素存在的，因此，對行內元素設定高度、寬度、內外邊距等屬性，都是無效的。如下面的代碼把display:block;屬性值去掉的話，寬度和高度都不會起作用了.

 <span style="width:100px;height:100px;display:block;background-color:blue;"></span>

  

在xhtml中每個對象而言，都擁有自己預設的顯示模式。div對象的預設顯示模式是display :block。從而使div成為一個塊狀容器，其預設空間是佔據整行空間。而span的對象的預設顯示模式為display：inline 。而display屬性的用法是改變元素的顯示模式。

 

 

margin可以控制內聯和區塊層級元素的間距，而不光是內嵌元素。主要注意他們之間的轉換問題，如區塊層級元素加float屬性會變為內嵌元素。

 

可變元素為根據上下文語境決定該元素為塊元素或者內嵌元素。* applet - java applet* button - 按鈕* del - 刪除文本* iframe - inline frame* ins - 插入的文本* map - 圖片區塊(map)* object - object對象* script - 用戶端指令碼

 

CSS區塊層級元素和行內元素