首頁 >web前端 >html教學 >行內元素與區塊級元素之間轉換的詳細教學

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

零下一度
零下一度原創
2017-05-06 14:04:564983瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn