作者iamnodoubt ( )
看板Web_Design
標題Re: [問題] CSS 階層問題一籮筐
時間Wed May 6 22:35:01 2015
※ 引述《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://webptt.com/m.aspx?n=bbs/Web_Design/M.1430922905.A.725.html
1F：推 befdawn: 謝謝回覆！我知道為何背景不能用在 #bar 的原因了 05/06 23:23
2F：推 befdawn: （母元素的 #bar 與 #bar ul 會沒有東西包住） 05/06 23:26
3F：→ befdawn: 但還是不太理解 margin: 0; 不能放在其他兩處的原因？ 05/06 23:28
4F：推 evilzero24: 2.每個元素有自己的 margin ,會放在 ul 是因爲他原本 05/06 23:39
5F：→ evilzero24: 自是有預設的margin，因爲在此是要拿來做選單，所以 05/06 23:39
6F：→ evilzero24: 把他全清掉。 05/06 23:39
7F：推 evilzero24: div 及 li margin 預設就是 0 所以才沒有特別去清除預 05/06 23:41
8F：→ evilzero24: 設值 05/06 23:41
9F：推 befdawn: 了解！！ 太感謝！ 05/06 23:53
10F：→ befdawn: 想順便問 overflow 也是這部分的嗎？感覺有點像是分段落 05/06 23:54
11F：→ befdawn: （格式的分段落？） 05/06 23:54
12F：→ mmis1000: 個人建議，可以用normalrize.css之類，拿掉那些預設樣式 05/07 02:58
13F：→ mmis1000: 可以讓你少踩一堆地雷 05/07 02:58
14F：推 evilzero24: ul li 一開始只是符號清單，ul前方會有 margin是很正 05/07 09:01
15F：→ evilzero24: 常的，只是被我們拿來做成選單所以才需要清除預設。 05/07 09:02
16F：→ evilzero24: 不過若要做跨瀏覽器的話，就建議去查 reset.css了 05/07 09:05
17F：→ evilzero24: 每個人觀念都不大相同，提出我的建議參考參考 05/07 09:06
18F：→ evilzero24: overflow 一開始只是照它字面上的定義，只是可以清除 05/07 09:08
19F：→ evilzero24: float 的附加效果吧 XDDD 05/07 09:09
20F：→ evilzero24: 建議原 PO 去更仔細的看 float 的使用與清除會比較好 05/07 09:10
21F：推 befdawn: 謝謝建議!!:D 05/07 09:50