CSS塊級元素 內聯元素 內聯塊狀元素完全解析

2021-07-25 19:12:36 字數 764 閱讀 5481

什麼是塊級元素?在html中、 、、、和 就是塊級元素。設定display:block就是將元素顯示為塊級元素。如下**就是將內聯元素a轉換為塊狀元素,從而使a元素具有塊狀元素特點。

a
塊級元素特點:

1、每個塊級元素都從新的一行開始,並且其後的元素也另起一行。(真霸道,乙個塊級元素獨佔一行)

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

3、元素寬度在不設定的情況下,是它本身父容器的100%(和父元素的寬度一致),除非設定乙個寬度。

在html中,、、、和就是典型的內聯元素(行內元素)(inline)元素。當然塊狀元素也可以通過**display:inline將元素設定為內聯元素。如下**就是將塊狀元素div轉換為內聯元素,從而使 div 元素具有內聯元素特點。

div

......

我要變成內聯元素

內聯元素特點:

1、和其他元素都在一行上;

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

設定;3、元素的寬度就是它包含的文字或的寬度,不可改變。

內聯塊狀元素(inline-block)就是同時具備內聯元素、塊狀元素的特點,**display:inline-block就是將元素設定為內聯塊狀元素。(css2.1新增),

inline-block 元素特點:

1、和其他元素都在一行上;

2、元素的高度、寬度、行高以及頂和底邊距都可設定。

CSS 塊元素 內聯元素 內聯塊元素

元素就是標籤,布局中常用的有三種標籤,塊元素 內聯元素 內聯塊元素,了解這三種元素的特性,才能熟練的進行頁面布局。塊元素,也可以稱為行元素,布局中常用的標籤如 div p ul li h1 h6 dl dt dd等等都是塊元素,它在布局中的行為 下面採用div來進行演示一下 那麼下面有乙個想法,就是...

CSS 塊元素 內聯元素 內聯塊元素

元素就是標籤,不居中常用的三種標籤,塊元素,內聯元素,內斂塊元素,了解這三種元素的特性,才能熟練進行頁面布局。地元素,也可以成為行元素,不居中常用的標籤如 都是塊元素,他們在布局中的行為 內聯元素,也可以成為內元素,不居中常用的標籤如 等等都是內聯元素,他們在布局中的行為 解決內聯元素間隙的方法 去...

css 塊元素 內聯元素 內聯塊元素

元素就是標籤,布局中常用的有三種標籤,塊元素 內聯元素 內聯塊元素,了解這三種元素的特性,才能熟練的進行頁面布局。塊元素 塊元素,也可以稱為行元素,布局中常用的標籤,如 div p ul li h1 h6 等等都是塊元素,它在布局中的行為 1 支援全部的樣式 2 如果沒有設定寬度,預設的寬度為父級寬...