5 塊元素與內聯元素之間的轉換

2022-08-17 16:12:15 字數 1625 閱讀 5837

一、塊元素與內聯元素之間的轉換

關於塊級元素與內聯元素之間的轉換我們可以使用css解決,使用css以後塊元素和內聯元素的這種屬性差異就不成為差異了。比如,我們完全可以把內聯元素加上display:block這樣的屬性,讓它也有每次都從新行開始的屬性,即成為塊元素同樣我們可以把塊元素加上display:inline這樣的屬性,讓它也在一行上排列。

二、display:inline與display:block

display:inline:顯示為內嵌,使快元素轉換為內聯元素同時具備內聯元素標籤的特徵。

display:block:顯示為塊,使內聯元素轉換為塊級元素同時具備塊元素標籤的特徵。

三、塊級元素轉內聯元素,display:inline的使用。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

divstyle

>

head

>

<

body

>

<

div>div1

div>

<

div>div2

div>

body

>

html

>

**段執行結果:

已經成功將塊級元素轉換為內聯元素,同時已經具備內聯元素的特徵了。

四、內聯元素轉塊級元素,display:block的使用。

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

>

span, em

style

>

head

>

<

body

>

<

span

>span1

span

>

<

em>em2

em>

body

>

html

>

**段執行結果:

已經成功將內聯元素轉換為塊級元素,同時已經具備塊級元素的特徵了。

五、display

display:是將標籤轉換為頁面中展示的型別不會改變標籤的本質。

詳解塊元素與內聯元素之間的轉換方法

一 塊元素與內聯元素之間的轉換關於塊級元素與內聯元素之間的轉換我們可以使用css解決,使用css以後塊元素和內聯元素的這種屬性差異就不成為差異了。比如,我們完全可以把內聯元素加上display block這樣的屬性,讓它也有每次都從新行開始的屬性,即成為塊元素同樣我們可以把塊元素加上display ...

內聯元素和塊級元素之間的轉換

內聯元素和塊級元素之間的轉換方法 比如,我們完全可以把內聯元素加上display block這樣的屬性,讓它也有每次都從新行開始的屬性,即成為塊元素。同樣我們可以把塊元素加上display inline這樣的屬性,讓它也在一行上排列。知識拓展 一 內聯元素又名行內元素 inline element ...

定位 內聯元素與塊元素轉換

1.內聯元素與塊元素 塊元素 明顯特徵是獨佔一行,可以設定寬高 maring和padding可以設定 內聯元素 不獨佔一行,無法設定寬高,maring和padding可以設定水平的 起於凡而非凡 起於凡而非凡 3.絕對定位與相對定位 相對定位 相對與元素自己本身來移動定位 絕對定位 距離父類 有po...