项目中必须知道有关css和html的常识

根据模块化的思想，将目录划分为html，css，image三大部分。

css部分：（base.css、globa.css和mod文件夹）
1、base.css放置的是reset，clearfix等基础类和工具类；
2、globa.css放置的是布局样式，包括header，footer等样式；
3、mod文件夹下面放置的模块，组件的样式；

html部分：（mod文件夹和template文件夹）
1、mod文件夹下面放的是模块的代码片段集合。如果有可能尽可能粒度划分的更细，因为这些都是代码片段，希望以后有工具做到代码片段和css的自动载入;
2、template文件夹下面放的是产出物，其实就是一些模块的拼合。只要模块写的够好这块工作就很好做了。

images部分：（base文件夹、data文件夹、icon文件夹和mod文件夹）
1、图片文件夹的部署和css部署是对应的，base和global的前景图和背景图放在base文件夹里面。
2、用作例子的示例图片放在data里面比如，头像之类的
3、第三方和icon放在icon的文件夹中
4、Mod文件夹中放的是模块所需要的前景图和背景图，小图标用sprite合并到base中

下面是几个有关css的tips：
1、对非a标签添加伪类状态，例如span:hover{}。在采用偷天换日的手法a:hover span{}，解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。

 

2、选项卡去掉虚线框，IE解决方案：<a href=”..” hidefocus=”true”>；FF下解决方案：a:focus {outline:none;-moz-outline:none;}

 

3、内联元素居中水平采用父元素text-align:center;垂直采用height=line-height；块级元素水平居中自身margin：0 auto;text-align:left（对子内联元素不入侵）
父元素text-align:center;块级元素可以采用text-indent调解左边距，比padding-left的好处在与不会影响固定宽度值

 

4、小图片存为gif文件比png-8要小，但是像css sprites这种颜色种类不多的大图片存为png-8要比gif要小

 

5、内联元素用display:inline-block;比较给力，IE6下虽然不支持这个属性，但是会触发内联元素的haslayout，所以表象一样。块级元素就不行了

 

6、内联元素float:left;之后按理说应该表现为块级，但是文字在IE6和IE7下会填充上一行的空隙。解决方案white-space: pre;

 

7、IE6下当高度小于font-size的时候，会被撑高。解决方案：font-size:1px;

 

8、css在浏览器渲染过程中是从右向左读取的，尽量不用名字空间约束样式名，尽量不对元素直接写样式。