CSS学习笔记(2010.5.9)

很久没有用过CSS拉,都忘记得差不多拉

本来就没有打好基础,所以现在用过来还是有点问题

所以打算重新认真学习一下,并把一些注意到的问题写下来

方便自己以后查找,嘻嘻~~~

PS:IE的高低版本,我定义的分界线是:IE6. IE5.X-IE6为低版本,IE6以上的为高版本,不过这种定义还是不太准确

1.书写hack里的顺序是FF,IE高版本,IE低版本,第一次看CSS的时候,没有留意,也没有记住

这一次,我再想一下近来实践的经验才发现,这里面也是有它的道理的,不只是一个建议

而是一种解决问题的策略,先保证正常情况下能表现自己的想法,然后再对非正常的情况进行修正

这样下去,到最后的结果也是我们想要的,可是当这种顺序反过来,就可能在最后关头出错,结果就可能不是我们预想的那样拉

2.得记住几个常用的hack:

*:区分FF和IE,IE能用,FF不能用

!important:区分IE的高低版本,高能用,低不能用,FF正常

_:IE低版本能用,IE高版本和FF都不能用

*+html 与 *html 是IE特有的标签, Firefox 暂不支持

IE的if条件hack

 

3.浮动的问题,这个可是大问题,如果不认真搞懂,会让人疯掉的

浮动特点:不同于绝对定位,浮动的元素依然是页面流的一部分,而绝对定位的元素被移出页面流

浮动属性值:Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值

用处:主要是用于文字环绕和网页布局

问题的出现:在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。

 

update@ 2010.5.10

4.margin的垂直重叠,当两个垂直方向上的margin相遇时,实际叠加的结果是两margin值中的最大值.无论是两个兄弟元素还是父子元素都会有这个问题

   而且它还会与自身进行叠加,发生在一个空白没有padding和border的元素,此时此元素的margin-top和margin-bottom会进行叠加

   这种叠加只发生在普通文档流中块框的垂直方面上,行内框\浮动框和绝对定位框不会发生.

5.定位中的关键字:块元素,行内元素,display,普通流,浮动,绝对定位,相对定位,无名块框

 

6.行内元素一般情况下会自动高度,也可以为其设置行高.

 

7.无名块框出现在把一些文本添加到一个块级元素(如div)的开头时,假设有一个包含三行文本的段落,每一行文本就会形成一个无名块框

   而且无法对无名块(行)框应用样式

 

8.相对定位,这里的相对是指这个元素相对于它在文档流的位置进行偏移,原来占据的空间依然存在,偏移后可能会覆盖其它元素

   绝对定位,这种定位会例元素脱离文档流,不占据空间,它的位置相对于最近已定位的祖先元素,如果没有的话,就相对于最初的包含块,一般是html元素

　绝对定位可用z-index值设置它显示的层次

 

(待续)