高质量的css学习笔记
怪异模式和DTD
为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式两种方法来解析网页
在怪异模式中，width 包含padding + border ,在标准模式中 盒子由width 、border、padding组成
块级元素居中的方法， width + margin-left:auto | margin-right:auto;
怪异模式与DTD有关。如果漏写dtd,在ie中就会触发怪异模式。
如何组织css
应用css的能力分成两部分，使用css的api,会组织css
组织方法有：按功能划分，布局layout.css,字体的font.css 按区块划分， header.css footer.css
主体放main.css
组织css的方法：
按功能划分 base common page 知道了组织css的方法
base.css
提供css reset 功能 和最小的原子类
它与具体的页面无关，所有风格的都可以引用它。力求精简和通用 。
下面的例子很好。 例如建房子，base.css打地基（css reset）,并提供砖块(原子类)，具有高度可移植性。内容很少。
common.css 提供组件级的css类。它是网站级别的，重复出现在的模块，要保持重用性和灵活性。
比喻为门窗。 UI组件。
page.css是页面级别的。 如果网站页面不多，可以放在一个page.css里，用注释标段落。需要有命名规则来避免冲突。
推荐的base.css
它具有无视美工设计，适用于任何网站的特点，关系到网站开发的效率和css文件的大小
得到了一个base.css文件
css reset 文字排版 定位 长度高度 边距
css reset 删除浏览器的默认样式。主要是有差异 ul的边距 firefox 是用padding ie 是用marging
*{ margin:0px;padding:0px} 不好就是在于性能，只需要将常用 的标签写出来。
有时还喜欢把font-size 和color写进去 div ...p . dl ... { margin:0,padding:0,font-size:12px;color:#000; }
不好的地方就是它会破坏css的继承性。
可借鉴一些框架。
.fl .fr display:inline 解决ie6的双外距问题(浮动的时候)
.bc 使块级元素居中。 要加上w100才能使用，体现了原子类，只设置一个css规则的概念
.clearfix 在父元素加clearfix类，解决。
.zoom zoom:1 ie专有属性，解决些问题
模块化css 在css中引入面向对象编程思想
如何划分模块--单一职责。 写样式前，先分模块
将面向对象的思想引入到css的模块化里。
从视觉上进行划分 ，样式和功能相对独立且稳定的一部分就可以视为模块。
模块与模块之间尽量不要包含相同的部分。如果有相同部分，应将它们提取出来。拆分成一个独立的模块。
模块应当在尽可能少的原则下，做到尽可能简单，以提高重用性。
css的命名 -- 命名空间的概念
有意义的英语，驼峰式或分隔线
不要滥用子选择符，因为会有冲突的危险
骆驼命名法用于区别不同单词，划线用于表明从属关系
.timeList-lastItem
在page层有不同工程师将代码写重复的可能，加前缀可以解决。
.ysw-timelineList-lastItem
可以带来好的可读性、避免多人合作的冲突。
多用组保，少用继续。
例子很好。在写的时候分多个类来写，单一职责
如何处理上下margin
如果不确定模块的上下margin,那么可以用组合的方式来写，并且同时不要使用margin-top 和margin-bottom ,会产生合并的风险。
css选择器的权重
标签 1 类名10 id 100
相同权重时最后定义的优先。
子选择器定义样式会造成权重过高，不好覆盖样式，难维护。多使用些类名就能解决。
Css sprite
为了减少http请求，要不要使用这种技术看网站流量。它的负作用是维护性。
模向的放一起，纵向的放一起。
图片翻转时，将背景图作在一张图上。 background-position
css编码风格
一行式编码风格 减少文件体积
尽量使用css，少用id
Css hack 有三种方法
条件注释法
<!--[if IE 6]> if gt IE 6
<![endif]-->
选择符前缀法， 样式前缀法 _ie6 * ie6,7
链接点击后 hover样式不出现问题是因为a事件顺序放置， love-hate link visited hover active
hasLayout ie的css解析引擎有时会出问题，要手动触发一个hasLayout zoom:1 height:1% position:relative;
块级元素可以设置width,height 行内元素不能设置
块级元素margin padding 行内元素 左右的设置没事，，，上下不起作用，只会增加面积