小结一下前端html+css的经验（一）

1、不要使用太小的图片作背景平铺，这就是为什么不少人都不用 1px 的缘由，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，须要 200*200=40, 000 次，占用资源。

2、无边框，推荐的写法是 border:none; *border:0px; 由于border:0px; 只是定义边框宽度为零，但边框样式、颜色仍是会被浏览器解析，占用资源,为了IE浏览器兼容，我一般那么写。。

3、慎用 * 通配符，所谓通配符，就是将 CSS 中的全部标签均初始化，无论用的不用的，过期的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签如reset.css中的ul{margin：0px;padding:0px}，不要用*号，而是写上一般要reset的标签。

4、样式放头上，脚本放脚下。不内嵌，只外链，这是基本的。

5、最好用fireworks处理图片，好像PS和fireworks区别不是很大，可是图片多起来就见分晓，参考http://www.th7.cn/Article/pm/fw/201101/20110113222200.html

6、坚定不用 CSS 表达式，css就是css，扯上javascript的expression进来，不但性能影响了，独立性也不行。

7、使用 引用样式表，而不是经过 @import 导入，引入样式表是加载完css才渲染页面，用户体验比较好，不会出现界面初始化紊乱的现象。

8、知道何时用什么图片格式，如：png是压缩比较少的图片格式，很清晰，但IE6不支持PNG-24,却彻底支持PNG-8，（若是是不透明的PNG-24,IE6也是完美支持），gif用于要求不高的小图标，兼容性很好，jpg是压缩不少的图片，也是使用最多的……

9、千万不要在 HTML 中缩放图片，放大很差看，缩小占资源。

10、正文字体最好用偶数，12px、14px、16px，效果很是好。特例，15px。

11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。若是给序列表添加float属性，记得必定要清楚浮动。能够是clear:both;也能够是<br clear=”all”/>注意浮动的兼容性。

12、中文标点用全角。英文夹杂在中文中，左右空格，半角。

13、记得定义全局的globle.css和reset.css。globle定义基本风格，如基本底色、用的比较多的颜色、用的比较多的样式、宽度等。Reset重置基本标签的一些属性。

13、注意超连接点击事后hover样式就不出现的问题，被点击访问过的超连接样式再也不具备hover和active样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A  连接正确顺序 a: link; visited; hover; active;

14、IE6浮动标签的margin双倍边距bug问题:加上display:inline解决

15、固定高度自适应，标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开须要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 能够这样定义： div { height:auto!important; height:200px; min-height:200px; }

16、定义1px左右高度的容器，IE6下这个问题是由于默认的行高形成的，解决的方法也有不少，例如：overflow:hidden | zoom:0.08 | line-height:1px

17、怎么样才能让层显示在FLASH之上呢？解决的办法是给FLASH设置透明:

<a href="http://www.chinaz.com/">:</a> <pre lang="html" line="1">

       <param name="wmode" value="transparent" />

      

18、怎样使一个div层居中于浏览器中？

div{position:absolute;top:50%; left:50%; margin:-100px 0 0 -100px;width:200px; height:200px; border:1px solid red;}

19、处理文字常常用的：文字自动换行:word-wrap:break-word;       文字强制同一行：white-space: nowrap;     超出行用“…” text-overflow: ellipsis; 超出范围隐藏：overflow: hidden;

20、常常用的命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制总体布局宽度：wrapper 左右中：left right center 命名所有使用小写字母，若是须要多个单词，单词间使用“-”分隔，好比user-list

21、display:none;隐藏对象。与 visibility 属性的hidden值不一样，其不为被隐藏的对象保留其物理空间.visibility:hidden此属性为隐藏的对象保留其占据的物理空间。

22、overflow:hidden;一个比较合理的方法, display:block;/*统一转化为块级元素*/，高度自适应:clear:both;  IE6的双倍边距BUG display:inline

23、IE6下图片下方有空隙产生： 设置img 为display:block 或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom

IE6下这两个层中间怎么有间隙： .right也一样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

24、水平居中和垂直居中 ： //注：html代码前面必定要加上下列w3c声明，不然没法居中：

水平居中:div { width:400px; height:400px; margin:0 auto; }

垂直居中: 设置一个和层高度相同的行间距,div { width:400px; height:400px; line-height:400px;}