前端CSS学习笔记

最近团队的前端人员离职了,样式只能自己写,恶补了一点css。

1、尽量编写语义良好的html标签,判断网页标签语义是否良好的方法:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

2、尽可能少用无语义的标签div和span。

3、在语义不明显,既可用p也可用div的地方,尽量用p。因为p在默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利。

4、不使用纯样式标签,如b,font,u等,改用css设置。

 

IE的hasLayout问题:

在IE7发布之前,有人推荐用height:1%来触发hasLayout,因为IE6会将height按照min-height来解析,但IE7发布后这种方式就不适用了,更好的触发hasLayout的设置是zoom:1,不用担心引用任何副作用。

 

ID和Class作为css选择符最常用的挂钩,其区别已经成了一个经典问题。

1、同一个网页,相同的id只能出现一次,不可重复。

2、id的css选择符权重为100,而class的选择符权重为10。

一般情况下,建议尽量使用class,少用id。

 

区别不同浏览器,CSS hack写法:

区别IE6与FF:
       background:orange;*background:blue;

区别IE6与IE7:
       background:green !important;background:blue;

区别IE7与FF:
       background:orange; *background:green;

区别FF,IE7,IE6:
       background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;

IE6支持下划线,IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;  

 

Hack 的顺序:

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略, 顺序如下:
Firefox -> IE6 -> IE8/7 -> 其他

 

其它一些:

1.ie8下兼容问题,这个最好处理,转化成ie7兼容就可以。在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了!
       <meta http-equiv="x-ua-compatible" content="ie=7" />

2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如
       margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
       margin-left:5px;/*IE6下属性写的是5PX,但在显示出来的是10px*/;

3.清除块display,这个可以解决浮动造成的块,造成块后,当DIV背景填色或填图片的时候,会出现背景断开或差一小块。这种兼容出现的不太多,我做到现在,只遇到过两次,方法是在出现兼容的DIV的CSS中写一个display:block,或其它属性,中文什么意思我不知道,我英语差,但能达到想要的效果……


4.很多朋友DIV+CSS的时候,会出现,在IE的几个浏览器下都好了,但是在FF出问题了,用!important又会把IE7做的不兼容,很头疼,在想,有没有什么方法只对FF下进行操做,我用过这个方法,感觉得是百试不爽,就是在属性前面加符号如:*、&,¥,#,@,—,+,加过符号的属性只有IE的浏览器才识别,而FF不识别,方法如下(注意有符号的属性和没符号的属性的顺序)
       height:100px;/*FF下显示100的高*/
       +height:120px;/*IE678下显示120高*/

5.有时候,会在布局的时候,发现,有一个DIV浮动了,接下来的一个DIV本来是要在下面显示的,结果跑上面去了,这种情况一般在FF下面会出现,解决的办法就是清除一下浮动,在设置过浮动的那个DIV下面加一个DIV,CSS面写个clear:both;如下:
       <div style="float:left;height:100px; width:500px;">
       <div style="clear:both;">
       <div style="height:100px; width=300px">

6. 再就是居中问题,这个问题在新手身上很多,主要原因是对盒子模型不够理解,没熟记盒子模型,如果发现你的页面没有局中,我现在知道的,有这几个原因:1. 一个是没盒子,就是BODY后的一个大DIV把所有DIV装起来的那个,你没写。2.就是你写了,但是宽度没用绝对宽度:而是用一个相对的宽度,想局中,必须用绝对宽度。

posted @ 2010-09-08 09:31  木子博客  阅读(429)  评论(1编辑  收藏  举报