1. 当页面内标签无法满足设计需求时，再添加div，span作为辅助，div不要滥用；
2. div（块级元素），span（行内元素），没有语义；
3. h1~h8在使用时不要有断层；
4. 解决IE6 margin-left 双倍bug方法：
.fl{float:left;display:inline;}// 我个人现在使用.fl{float:left;_display:inline;}hack方法，个人感觉直接针对ie6 修改属性比较好
.fr(float:right;dispaly:inline;)
5. 块级元素居中时，如果直接使用不足以达到居中效果，需要设置宽度；
例如：.bc--blockCenter <div class="bc w200"></div>
6. 模块与模块之间尽量不要有相同部分，如果有相同部分，应该提取出来，拆分成一个独立元素；
7. margin-top,margin-bottom 同时使用会使边距重合，相邻的边框要避免；
8. 行内元素（inline-block）调整竖直排列的位置：vertical-align:-10px;
9. css命名可体现从属关系，提高可读性；
10. css sprite 对于流量大的网站可使用；
11. 超链接 love hate
l(link)ov(visited)e h(hover)a(active)te
12. 常见块级元素：div,p,from,ul,ol,li
常见行内元素：span，strong，em
行内元素对于width，height无效
13. 行内元素 padding-left; padding-right; margin-left; margin-right; 都产生边距效果；
竖直方向：padding-top; padding-bottom; margin-top; margin-bottom 不会产生边距效果；
14. position:absolute 和float 会随时改变display 类型
变为：display：inline-block; 可设置长宽（默认宽度并不占满父元素）
设置display:inline/block 对其无效；
15. 文本水平居中方法
情况一：文本，图片等行内元素水平居中：给父元素设置 text-align:center;
情况二：确定宽度的块级元素水平居中：margin：0 auto；
16. 竖直居中方法：
情况一：父元素高度不确定的文本，图片，块级元素的竖直居中：
通过个父元素设置上下高度如：父元素 padding-left:20px
padding-right:20px;
情况二：父元素高度确定的单行文本竖直居中：
height:100px; line-height:100px;
17. 能<p>...</p> 的就不要<div><p>...</p></div>
防止标签滥用。
18. <p>是内容标记，<table>结构标记，不允许把结构标记放在内容标记中；
19. 小细节，background-color 在IE中：content+padding
在firefox中：content+padding+border
20. <span>标记可以包含于<div>中
<div>不可以包含于<span>中
21. span1[margin-right][margin-left]span2
span1和span2 的行间距是margin-left + margin-right
22. div1
[margin-bottom]
[margin-top]
div2
div1+div2的间距不是margin-bottom + margin-top 的综合，而是两者中较大者。较小的margin塌陷到了较大的margin中；
23. 调整<p>的行间距 可以使用
p{line-height:160%;}
24. 如果父div高度值小于子块的高度加上margin的值，IE浏览器会自动扩大，保持子元素的margin-bottom的空间和父元素自身的padding-bottom。
而firefox父div不会扩大，子div会溢出；
25. margin 设置为负数时，块向相反的方向移动，甚至覆盖在另外的块上，当为父子关系时，子块若为负数，可将子块从父块中分离；
26. 使用相对定位（position:relative）的盒子，会相对他原本的位置，通过偏移指定的距离，到达新的位置；使用相对定位的盒子在标准流中，它对父块没有任何影响，对兄弟盒子也没有任何影响。
此处没有任何影响需要在解释下：没有任何影响就是，例如box1；box2；box3三个盒子，当box2，相对偏移走了以后，box3不会随着bos2而移动，还是认为box2没有移动。
27. 使用绝对定位（position:absolute）的盒子，以他“最近”的一个“已经定位”的“祖先元素”为基础进行偏移的。如果没有已经定位的元素，会以浏览器窗口为基础进行定位。
绝对定位的框从标准流中脱离，其他的盒子好像认为这个框不存在一样。
举例解释下：box1.box2，box3，如果box2 绝对定位了，box3 会受到影响，认为box2消失了，box3重新调整位置。
28. 绝对定位之——IE6 bug
用右边框定位是正确的，如果用左边框定位，会出现错误，定位的宽度会相差父div的padding宽度；
解决办法：给父div（定位的基准盒子）增加一条css样式：height：1%
29. 如果设置了绝对定位而没有设置偏移属性，那么他将保持在原来的位置。但是脱离标准流。
这种用法可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置。
30. position:fixed 固定定位，基准是浏览器窗口，拖动浏览器滚动条，固定定位元素保持不变。不支持IE6。
31. line-height 可设置在文本元素中，对P设置行高，就是确定段落每一行的行高。
line-height可设置在容器元素中，对div设置line-height 属性，那么它里面的元素都将使用这个行高值。
可设置百分比，line-height：160% 可设置每行见的间距；
32. 中文排版习惯，段落开头空2格，
段首缩进： p{text-indent:2em;}
33. vertical-align:middle;在表格单元中，内容会竖直方向居中对齐，但是在div中，不会有任何效果；
34. 图像替换标题：（文字隐藏）
<h1><span>标题</span></h1>
span{display:none;}
另外一种方法是<h1></h1> h1{text-indent:-9999px;}
个人推荐第一种，第二种方法如果下面加上了链接，在ff中点击效果，会有一段横跨浏览器的虚线，不美观；
35. <ol>顺序列表
<li>无顺序列表
36. IE bug
a:hover 有区域，仍是鼠标移动到文字上才能触发效果。
解决办法，在“a,a:hover”上加上height：1em；
37. div1
div2
浮动后，上下相邻不会发生“塌陷”
38. 链接在新窗口打开
<a href=" " target="_blank">test</a>
所有链接在新窗口打开：
<head>
<base target="_blank">
</head>
39. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
横向上的。如果float容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width
40. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
41.对于中文的首段文字空2格，不建议使用 ，这个是不合理的，应该让css干这个事
p{text-indent:2em;}
其中：text-indent:2em定义了文本缩进2em，em是相对长度单位，在这里你设置的字体大小有多大(px)，1em就是多大。这段代码可以控制整个页面的段落缩进，也可以单独控制某个盒子(div)内的段落缩进。
42. inline-block属性：导致一个元素产生块状属性，而本身作为一个内联和模型流动排列，可以像块状元素一样定义长宽高，又可以和内联元素排在一行
43. <p>和<div>处理功能上的区别，显示上的区别就是<div>的padding、margin都是0，而<p>默认padding、margin都不为0，并且不同浏览器默认值不同，这也是一个兼容性问题
除此以外，如果不考虑规范，p（设置padding、margin都是0）也能当中div用
44. div1
div2
两个div，如果div1 浮动了，div设置margin-top无效，个人使用的方法是将div也设置浮动；
45.语义化html, 如 标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;
46.书写链接地址时, 必须避免重定向，例如：href="http://itaolun.com/", 即须在URL地址后面加上“/”；
47.必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type="text" id="name" name="name" /></p>
须写成:<p><label for="name">姓名: </label><input type="text" id="name" /></p>
48.重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;（对SEO有好处）
49.特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;
50.class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;
51.class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由 小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.
52.为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;
53.按a命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,
样式写法: #mainnav .firstnav{.......}
按b命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,
样式写法: .main_firstnav{.......}
54. 研究表明， 语义化的标签，越少的嵌套，对浏览器的解析就越快，显示的速度就越快，当然对不同用户群的用户体验也就越好！特别是对于一些特殊群体和阅读设备
55.页面中推荐的两种注释：
<%!–jsp注释,不会输出,推荐使用–%>
<!--前端html注释方法-->
56.IE定位bug和haslayout：
IE下如果设置position:absolute或者relative，总是偶尔会出现定位不正确的问题，如果使父容器有了haslayout，那么定位问题又可以恢复正常了。常用的获得haslayout的方法是给css设置zoom:1;IE下的定位和haslayout有莫大的关联，常见的问题还有躲猫猫bug和边框截断bug，都可以通过zoom:1;解决。
今天写个脚本，给某个div设了position:relative;然后这个div上边的某处，另一个dom元素的height从0到200，FF下,div很正常地随文档流往下移动了，IE下div却没有变化，给div父容器设置zoom:1;问题就解决了。
IE下凡是和布局有关的bug，不妨都先试试zoom:1;可不可以解决。
57. css重的不是技巧，css的基础知识少得可怜。css设计的重点应该有三个：
1）去样式可读性，也就是标签语义化上；
2）组件模块化，组件的之间的低耦合和重用率；
3）弹性，能否能够有最大的弹性，应对变化的需求。
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
