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

为什么80%的码农都做不了架构师？>>>   

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;}

转载于:https://my.oschina.net/lianyi/blog/49240