作者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/cn.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