塊級元素(塊級元素一般當做容器使用，既可以容納內聯元素也可以容納塊級元素)

特點：

1.每個塊級元素都是獨自占一行，其后的元素也只能另起一行，并不能兩個元素共用一行。

2.元素的高度、寬度、行高和頂底邊距都是可以設置的。

3.元素的寬度如果不設置的話，默認為父元素的寬度。

4.塊級元素對應屬性display：block；

常見的塊級元素:

(1)div：主要用來進行框架布局。

(2)h1～h6：用來設置不同級別的標題。

(3)p:創建段落，會自動在其前后創建一些空白。

(4)hr:用來創建分隔先。

(5)ol:創建有序列表。

(6)ul:創建無序列表。

行內元素(任何不是塊級元素的可見元素都是行內元素。行內元素只能夠容納文本或者行內元素。)

特點：

1.可以和其他元素處于一行，不用必須另起一行。

2.元素的高度、寬度及頂部和底部邊距不可設置。

3.元素的寬度就是它包含的文字、圖片的寬度，不可改變。

4.行內元素對應屬性display：inline；

常見的內聯元素:

(1)strong：加粗強調。

(2)em：斜體強調。

(3)s：刪除線。

(4)u：下劃線。

(5)a：超鏈接。

(6)span：常用行級，可定義文檔中的行內元素。

(7)img：圖片。

(8)input:表單。

行級元素與塊級元素的轉換

如果想將塊級元素與行級元素相互轉換，該怎么辦呢？

可以在css樣式中用display:inline將塊級元素設為行級元素

同樣，也可以用display:block將行級元素設為塊級元素

行級-塊級元素

如果又想設置高度、寬度、行高以及頂和底邊距，又想元素處于一行，該怎么辦呢？

此時就可以用display:inline-block將元素設置為行級-塊級元素。

塊級元素和行內元素的分類

html中的塊級元素：

塊級元素1.png

塊級元素2.png

塊級元素3.png

html中的行內元素：

行內元素1.png

行內元素2.png

行內元素3.png

總結

以上是生活随笔為你收集整理的css块元素与行内元素特点,CSS区分块级元素和行内元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。