2015.1.5日，我去了北京一家網路創業公司面試，我感受到了那裡年輕人在一起拼搏的氛圍，招募欄上，說是希望要有幾年web前端工作經驗的，我憑著自己的這點小本事，不自量的去啦。結果，面試官問了，我許多我接觸過的問題，但是，不幸的是，我對那些知識點完全是只知道大概，對於這些知識點在實際中的應用，我卻知之甚少。面試時，我都不好意思啦，總覺得耽誤人家時間啦。
這個問題是當面試官問我盒子模型時，由於需要說上下左右邊距，為了更能說明，我舉例了行內元素與區塊級元素，但是，卻又被人「行內元素與區塊級元素之可以透過哪些方式方法轉換」問住啦，丟人啊！我只回答出來display，於是，我找了有關書籍，看了幾個網站的原始碼，再來總結一番。
區塊級元素與行內元素
#區塊級元素會擴展到與元素同寬。
行內元素會「收縮包裹」 其內容，並且會盡可能包緊。
（以上這兩個總結，來自於《css設計指南》這本書）
#其預設css樣式
區塊級元素其高度為其內容高度，寬度會擴展到與父元素同寬。所以導致區塊級元素會獨佔一行，無法在其後容納其他區塊級元素與行內元素。
行內元素其高度為其內容高度，寬度會縮小包裹其內容。奇怪的一點：行內元素之間有一定的距離，使用控制台看的時候，並沒有把這段距離算作盒子模型。我使用margin:0;padding:0並不會清除這段距離，？ ？求告知！
css修飾
#取代元素：取代元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。如瀏覽器會根據的type屬性來決定要顯示輸入框，還是單選按鈕等。引自這裡
非替換元素：如p a span p這些，即其內容直接表現給使用者端（例如瀏覽器）。
所以行內元素也就分成行內替換元素img input,與行內非替換元素span a…對於二者css修飾起來是有差別的。
行內非替換元素：其寬高設定無效， 對於內外邊距，邊框，可以設置，但是垂直方向的設定並不會影響文件流佈局，所以設定垂直內外邊距是沒有效果的，垂直邊框，我們是看得見，但是垂直邊框並沒有佔據文件流。所以上面的行內元素設定了寬度為10px的邊框，並不會導致下面元素的向下移動。
行內替換元素，除了具備行內元素同行並列的特點，他可以設定影響文檔流佈局的內外邊距以及寬高。 且設定高度等同於設定行高，會垂直居中
line-height 行內非取代元素雖然不具備寬高，但可以利用line -height來設定高度，但是奇葩的是，雖然行高可以影響行內元素的文檔流佈局，但是，其邊框依舊會包裹其內容，忽略行高帶來的上下留白。
margin 行內元素的邊距，不會合併（取代非替換）。不同於塊級元素，會合併上下，左右邊距。
區塊級元素可以對其高度寬度進行設置，同時也可以對邊框，內外邊距，進行設置，其設定結果影響文件流程佈局效果。
注意修改width後，並不會使得其下面的行內元素向上移動。
行內元素，行內元素可以對其高度進行設定麼？當然不能！這個回答當然太絕對。
元素分為替換元素與非替換元素。幾乎所有替換元素都是行內元素。
行內元素與區塊級元素的轉換
display:none;不顯示該元素，也不會保留該元素原先佔有的文件流位置。
display:block;轉換為區塊級元素。
display:inline;轉換為行內元素。
display:inline-block;轉換為行內區塊級元素。
以上四個是我常用的，事實上，還有很多
透過display:block;與display:inline;可以很容易的實現兩類元素變現形式之間的轉換。
但是，有很多時候，我們需要使用display:inline-block；來轉換行內元素，或是區塊級元素。但是這個元素時css2新增的屬性，對於IE7以下的版本不支援這個屬性，所以需要一些相容的方法。這裡會即將寫一篇
display
區塊級元素預設display:block;行內非替換元素(a,span)預設為display:inline;；行內替換元素(input)預設為display:inline-block;
float
當把行內元素設定完float:left/right後，該行內元素的display屬性會被賦予block值，並且擁有浮動特性。行內元素去除了之間的莫名空白，
position
當定位行內元素時，position:absolute，與position:fixed。都會使原先的行內元素變成區塊級元素。
【注意】透過以上的設置，可以實現為行內非替換元素設定寬高及內外邊距。但是替換時，也需要注意轉換為區塊級元素只是，float與position的副作用，他們本身的作用還會幹擾佈局效果。
之前介紹區塊級元素時，會說，區塊級元素的寬度會繼承其父元素。但是，只有為行內元素設定display:block;才會有這樣的效果，其他轉換之後並不會預設帶來這個效果。
建議小夥伴們還是自己在編輯器裡敲敲，對比一下，印象才深刻。
【相關推薦】
2. html開發手冊
#以上是行內元素與區塊級元素之間轉換的詳細教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
