關於div標籤

div css html

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

分享至

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

麻煩大家幫忙

ccutmis iT邦高手 2 級 ‧ 2019-07-03 11:28:46 檢舉

這個網站內容可以參考:
http://zh-tw.learnlayout.com/display.html

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

謝謝~這個網站我有收藏~

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

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來實現了.

回應
分享
檢舉

登入發表回應

0613

iT邦見習生 ‧ 2022-03-15 18:55:23

div 标签用作 HTML 元素的容器，它也可用于收集大部分 HTML 元素并使用 CSS 对其进行样式设置。假设我们要创建一个包含指向不同页面的链接的导航栏，并且要应用相同的 CSS。在这里，元素起着至关重要的作用，它使它成为一个特定的部分并立即将 CSS 应用到整个部分。

要了解有关块元素的更多信息，请参阅
https://www.scaler.com/topics/html/inline-and-block-elements/

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22195 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙