iT邦幫忙

1

關於div標籤

一般來說,div的display不是block嗎?
區塊級元素會占用掉一整行的空間,
那為什麼有時候我們使用div來做背景的時候不會占掉一整行,接續的內容沒有往下反而可以壓再背景上面?

麻煩大家幫忙 /images/emoticon/emoticon41.gif

ccutmis iT邦高手 8 級 ‧ 2019-07-03 11:28:46 檢舉
這個網站內容可以參考:
http://zh-tw.learnlayout.com/display.html
cute32346 iT邦新手 5 級 ‧ 2019-07-03 11:36:42 檢舉
謝謝~這個網站我有收藏~

2 個回答

3
dragonH
iT邦超人 5 級 ‧ 2019-07-03 11:16:31
最佳解答

你這問題感覺好抽象喔

舉個例子會更好

可以用 codepen

那為什麼有時候我們使用div來做背景的時候不會占掉一整行,接續的內容沒有往下反而可以壓再背景上面?

這個應該就有不只一種寫法可以達到這結果

看更多先前的回應...收起先前的回應...
cute32346 iT邦新手 5 級 ‧ 2019-07-03 11:36:07 檢舉

謝謝幫忙,是這樣的,例如 span接在上面的div標籤後面,內容為什麼還可以壓在背景上,div不是區塊嗎應該會占掉一整行的吧?

https://ithelp.ithome.com.tw/upload/images/20190703/20118708qyin6Uqvok.jpg

dragonH iT邦超人 5 級 ‧ 2019-07-03 11:55:33 檢舉

正常情況

<div> 是 dispaly: block

所以你直接把<span>放在後面

沒辦法達到你要的效果

如此 codepen

在此範例

要將 <div> 用做背景

通常是把 <span> 放在 <div> 裡

使他成為 <div> 的 childNode

如此 codepen

這裡可以看哪些預設是 block element

cute32346 iT邦新手 5 級 ‧ 2019-07-03 12:55:07 檢舉

原來如此... 感謝 ~/images/emoticon/emoticon41.gif
我好像問了一個很蠢的問題 XDDDD

改用span,而不是去更改div的預設特性,這樣會不會比較好一點?

0
小魚
iT邦大師 1 級 ‧ 2019-07-03 11:49:17

既然你知道div的"預設"是 display:block;
那就表示它可以改,
現在幾乎很多效果都是透過div來做,
只要配合CSS跟Js,
可以完成千變萬化的效果,
這個東西你學10年可能都學不完,
事實上自從RWD被重視以後,
很多東西都改成用div來實現了.

我要發表回答

立即登入回答