行內元素與區塊級元素之間轉換的詳細教學

2015.1.5日，我去了北京一家網路創業公司面試，我感受到了那裡年輕人在一起拼搏的氛圍，招募欄上，說是希望要有幾年web前端工作經驗的，我憑著自己的這點小本事，不自量的去啦。結果，面試官問了，我許多我接觸過的問題，但是，不幸的是，我對那些知識點完全是只知道大概，對於這些知識點在實際中的應用，我卻知之甚少。面試時，我都不好意思啦，總覺得耽誤人家時間啦。

這個問題是當面試官問我盒子模型時，由於需要說上下左右邊距，為了更能說明，我舉例了行內元素與區塊級元素，但是，卻又被人「行內元素與區塊級元素之可以透過哪些方式方法轉換」問住啦，丟人啊！我只回答出來<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>，於是，我找了有關書籍，看了幾個網站的原始碼，再來總結一番。

---

• 區塊級元素與行內元素

• #區塊級元素會擴展到與元素同寬。

• 行內元素會「收縮包裹」 其內容，並且會盡可能包緊。
  （以上這兩個總結，來自於《css設計指南》這本書）

• #其預設css樣式

• 區塊級元素其高度為其內容高度，寬度會擴展到與父元素同寬。所以導致區塊級元素會獨佔一行，無法在其後容納其他區塊級元素與行內元素。

• 行內元素其高度為其內容高度，寬度會縮小包裹其內容。奇怪的一點：行內元素之間有一定的距離，使用控制台看的時候，並沒有把這段距離算作盒子模型。我使用<a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>:0;padding:0並不會清除這段距離，？ ？求告知！

• css修飾

• #取代元素：取代元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。如瀏覽器會根據<img>src屬性的值來讀取圖片資訊並顯示出來，而如果查看(X)HTML程式碼，則看不到圖片的實際內容;又如由<input>的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;

• <a href="http://www.php.cn/wiki/919.html" target="_blank">float</a>
  當把行內元素設定完float:left/right後，該行內元素的display屬性會被賦予block值，並且擁有浮動特性。行內元素去除了之間的莫名空白，

• <a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>
  當定位行內元素時，position:absolute，與position:fixed。都會使原先的行內元素變成區塊級元素。

• 【注意】透過以上的設置，可以實現為行內非替換元素設定寬高及內外邊距。但是替換時，也需要注意轉換為區塊級元素只是，float與position的副作用，他們本身的作用還會幹擾佈局效果。
  之前介紹區塊級元素時，會說，區塊級元素的寬度會繼承其父元素。但是，只有為行內元素設定display:block;才會有這樣的效果，其他轉換之後並不會預設帶來這個效果。

  建議小夥伴們還是自己在編輯器裡敲敲，對比一下，印象才深刻。

【相關推薦】

1. #免費html線上影片教學

2. html開發手冊

3. php.cn原始html5影片教學

#

以上是行內元素與區塊級元素之間轉換的詳細教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！