看板 Web_Design 關於我們 聯絡資訊
※ 引述《befdawn (貝夫洞)》之銘言: : 各位好,最近在 udemy 初學 CSS,想請求前輩指點一二 : 這是我練習打的碼 : http://jsbin.com/robupe/1/edit?html,output : 1. 請問關於階層問題, : 為何 background-color: #eee; 要放在 #bar li,不能放在 #bar 或者 #bar ul 內呢? : 2. 同樣地, : 為何 margin: 0; 要放在 #bar ul 內,不能放在 #bar 或者 #bar li 內呢? : 3. 究竟該怎麼看待這樣的階層與屬性的關係?目前找不到邏輯,只知道試三次總會成功 : ,但想找個可尋之法。(感覺需要經驗去累積?Orz) : 先謝謝各位前輩了! 因為子元素用float 母元素沒辦法被子元素撐開 你開dev tool去看ul跟#bar的box-model就知道了 height=0 最常用的應該是overflow 其他你看這篇文章 https://css-tricks.com/all-about-floats/ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 175.180.169.20 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1430922905.A.725.html
befdawn: 謝謝回覆!我知道為何背景不能用在 #bar 的原因了 05/06 23:23
befdawn: (母元素的 #bar 與 #bar ul 會沒有東西包住) 05/06 23:26
befdawn: 但還是不太理解 margin: 0; 不能放在其他兩處的原因? 05/06 23:28
evilzero24: 2.每個元素有自己的 margin ,會放在 ul 是因爲他原本 05/06 23:39
evilzero24: 自是有預設的margin,因爲在此是要拿來做選單,所以 05/06 23:39
evilzero24: 把他全清掉。 05/06 23:39
evilzero24: div 及 li margin 預設就是 0 所以才沒有特別去清除預 05/06 23:41
evilzero24: 設值 05/06 23:41
befdawn: 了解!! 太感謝! 05/06 23:53
befdawn: 想順便問 overflow 也是這部分的嗎?感覺有點像是分段落 05/06 23:54
befdawn: (格式的分段落?) 05/06 23:54
mmis1000: 個人建議,可以用normalrize.css之類,拿掉那些預設樣式 05/07 02:58
mmis1000: 可以讓你少踩一堆地雷 05/07 02:58
evilzero24: ul li 一開始只是符號清單,ul前方會有 margin是很正 05/07 09:01
evilzero24: 常的,只是被我們拿來做成選單所以才需要清除預設。 05/07 09:02
evilzero24: 不過若要做跨瀏覽器的話,就建議去查 reset.css了 05/07 09:05
evilzero24: 每個人觀念都不大相同,提出我的建議參考參考 05/07 09:06
evilzero24: overflow 一開始只是照它字面上的定義,只是可以清除 05/07 09:08
evilzero24: float 的附加效果吧 XDDD 05/07 09:09
evilzero24: 建議原 PO 去更仔細的看 float 的使用與清除會比較好 05/07 09:10
befdawn: 謝謝建議!!:D 05/07 09:50