塊級元素與行內元素

塊級元素與行內元素

我們在做頁面布局的時候,一般會將html元素分為兩種，即塊級元素和行內元素。

塊級元素：塊狀元素排斥其他元素與其位於同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。常見的塊級元素有div, p ,h1~h6等。

行內元素：行內元素不可以設定寬（width）和高（height），但可以與其他行內元素位於同一行，行內元素內一般不可以包含塊級元素。行內元素的高度一般由元素內部的字型大小決定，寬度由內容的長度控制。常見的行內元素有a, em ,strong等。

例如：我們可以給div或p應用下面樣式，但是a標籤卻無法應用下面的樣式。

複製**

**如下:

.test

當然我們還可以通過樣式display屬性來改變元素的顯示方式。當display的值設為block時，元素將以塊級方式呈現；當display值設為inline時，元素將以行內形式呈現。所以我們可以給a標籤應用以下樣式：

複製**

**如下:

.test

另外，如果我們即想讓乙個元素可以設定寬度高度，又想讓它以行內形式顯示，這時我們可以設定display的值為inline-block。如：

複製**

**如下: a