css中行內元素與區塊級元素的區別介紹

本文主要介紹了行內元素和區塊級元素的區別，具有很好的參考價值，以下跟著小編一起來看下吧

##一、行內元素和區塊級元素的區別

　　1、 行內元素不會佔據整行，在一條直線上排列，都是同一行，水平方向排列；

　　　　塊級元素會佔據一行，垂直方向排列。

　　2、 區塊級元素可以包含行內元素和區塊級元素；行內元素不能包含區塊級元素。

　　3、 行內元素與區塊級元素屬性的不同，主要是盒子模型屬性上，行內元素設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。

二、行內元素與區塊級元素的相互轉換

　　行內元素轉換為區塊元素：display:block;

　　區塊元素轉換為行內元素： display:inline;

三、問題延伸

　　問題描述：為何img、input等行內元素可以設定寬、高？

　　詳細解答：

　　元素是文件結構的基礎，在CSS中，每個元素產生了一個包含了元素內容的框（box，也譯為「盒子」）。但不同的元素顯示的方式會有所不同，例如e388a4556c0f65e1904146cc1a846bee和45a2772a6b6107b401db3c9b82c049c2

　　就不同，而8e99a69fbe029cd4e2b854e244eab143和e388a4556c0f65e1904146cc1a846bee也不一樣。在文件類型定義（DTD）中對不同的元素規定了不同的類型，這也是DTD對文件之所以重要的原因之一。

 　

1. 替換與不可替換元素

#　 從元素本身的特點來講，可以分為替換和不可替換元素。

　　

a) 取代元素

#　　取代元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

　　例如瀏覽器會根據a1f02c36ba31691bcfe87b2722de723b標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果查看(X)HTML程式碼，則看不到圖片的實際內容；又例如根據d5fd7aea971a85678ba271703566ebfd標籤的type屬性來

　　決定要顯示輸入框，還是單選按鈕等。

　　(X)HTML中的a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3、221f08282418e2996498697df914ce4e、273238ce9338fbb04bee6997e5552b95都是替換元素。這些元素往往沒有實際的內容，就是一個空元素，例如：　

<img src=”cat.jpg” />
　　<input type="submit" name="Submit" value="提交" />

　　瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中產生了框。

     

 b) 不可取代元素

　　(X)HTML 的大多數元素是不可取代元素，即其內容直接表現給使用者端（例如瀏覽器）。例如：　

<p>段落的内容</p>

　　段落e388a4556c0f65e1904146cc1a846bee是一個不可取代元素，文字「段落的內容」全被顯示。

　　

2. 顯示元素

　　除了可替換元素和不可替換元素的分類方式外，CSS 2.1中元素還有另外的分類方式：區塊級元素（block-level）和行內元素（inline-level，也譯為「內嵌」元素）。

　　

a) 區塊級元素

　　在視覺上被格式化為區塊的元素，最明顯的特徵就是它預設在橫向充滿其父元素的內容區域，而且在其左右兩邊沒有其他元素，即區塊級元素預設是獨佔一行的。

　　典型的區塊級元素有：e388a4556c0f65e1904146cc1a846bee、e388a4556c0f65e1904146cc1a846bee、4a249f0d628e2318394fd9b75b4636b1到4e9ee319e0fa4abc21ff286eeb145ecc，等等。

　　透過CSS設定了浮動（float屬性，可向左浮動或向右浮動）以及設定顯示（display）屬性為「block」或「list-item」的元素都是區塊級元素。

　　但是浮動元素比較特殊，由於浮動，其旁邊可能會有其他元素的存在。而「list-item」（列表項25edfb22a4f469ecb59f1190150159c6），會在其前面產生圓點符號，或數字序號。

      

b) 行內元素

　　行內元素不形成新內容區塊，即在其左右可以有其他元素，例如3499910bf9dac5ae3c52d5ede7383485 、45a2772a6b6107b401db3c9b82c049c2、8e99a69fbe029cd4e2b854e244eab143等，都是典型的行內級元素。

　　display屬性等於「inline」的元素都是行內元素。幾乎所有的可替換元素都是行內元素，例如a1f02c36ba31691bcfe87b2722de723b、d5fd7aea971a85678ba271703566ebfd等等。

　　不過元素的類型也不是固定的，透過設定CSS 的display屬性，可以使行內元素變成區塊級元素，也可以讓區塊級元素變成行內元素。

   

3. 結論：#

　　替換元素一般有內在尺寸，所以具有width和height，可以設定。例如當你不指定img的width和height時，就按其內在尺寸顯示，也就是圖片被儲存的時候的寬度和高度。

　　對於表單元素，瀏覽器也有預設的樣式，包括寬度和高度。

更多css中行內元素和區塊級元素的區別介紹相關文章請關注PHP中文網！