css盒模型？行內元素及塊級元素間的轉換？

在css中，每乙個網頁元素均有有個display屬性（預設有屬性值），用於確定此元素的型別。

在此之前，先介紹一下盒模型,網頁需宣告doctype型別（瀏覽器辨識w3c盒模型）

css盒模式（box model）主要以下5個屬性：width、height、padding、border、margin。

tips1：因部分元素在部分瀏覽器中已設定了外邊距和內邊距，一般基礎樣式表中設定*;但是注意*效率並不高，一般body,div,dl,dt,dd,ul,li,ol,h1,pre,form,p,input,td,tr,...。

tips2：關於瀏覽器相容性，ie5及ie6在怪異模式（即box-sizing:border-box;border以內均為width）中使用非w3c標準，width包含內容+內邊距+邊框；一般情況下，若考慮此種情況，可建議迴避此元素，直接在此元素的父元素和子元素新增內邊距或外邊距。

tips3：整個網頁最大的盒子是，即瀏覽器本身。

注意：下一章節會記錄css3中彈性盒模型（flex box）。

1）行內元素（display:inline;），又稱內聯元素

特性：對此屬性的元素設定寬、高、margin上下值、padding上下值均無效，與其他元素在一行上。

常見如：a、em、b、i、span、strong、small、lable等，準確的來說是行內非替換元素，特殊一點：border可設定，但不會影響文件流，而行高會影響文件流，但會自動忽視border。

2）塊級元素（display:block;）

特性：獨佔一行，寬度繼承父元素的寬度，可設定寬高內外邊距等。

常見如：div、p、h標籤、ul、dd、tr、pre、table等

3）行內塊級元素（display:inline-block;）

特性：與其他元素在一行上且可以設定寬高。

常見如：img、input等，準確的來說應該稱之為行內替換元素，特殊一點：設定的高度預設為行高，垂直居中。

tips4：display屬性值為none時候不會保留原有空間，visible：hidden則會保留，其他屬性用的比較少，就不列舉了。

tips5：行內替換元素大概意思是瀏覽器會根據元素的標籤和屬性，來決定元素具體的顯示內容。

問題：元素有幾種方法會轉換行塊屬性？

方法一：最簡單的肯定是display：block/inline/inline-block/table等

方法二：行內元素設定float屬性後，此元素的display會賦值為block，且擁有浮動特性，原留白也會消失。

方法三：行內元素設定position屬性值為absolute或fixed後，此元素的display也會賦值為block。

注意：方法二和方法三轉換為塊級元素後，這兩種方法不會擁有塊級元素的特性之一：未繼承父元素的寬度。