關於div標籤

div css html

cute32346 2019-07-03 10:56:40 ‧ 1325 瀏覽

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

麻煩大家幫忙

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 個回答

dragonH

iT邦超人 5 級 ‧ 2019-07-03 11:16:31

最佳解答

你這問題感覺好抽象喔

舉個例子會更好

可以用 codepen

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

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

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

cute32346 iT邦新手 5 級 ‧ 2019-07-03 11:36:07 檢舉

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

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 檢舉

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

japhenchen iT邦高手 1 級 ‧ 2019-07-03 14:31:37 檢舉

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

登入發表回應

小魚

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

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

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答