此篇为本笔记的第二篇
标准模式与怪异模式（模拟老式浏览器的行为）
如果漏写了DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中（包括IE6，IE7，IE8）就会触发怪异模式
IE盒模型的解析
标准模式：网页元素的宽度有padding，border，width三者的宽度相加决定
怪异模式：width本身就包括了padding和border的宽度
组织CSS
base.css + common.css + page.css
base.css包括CSS reset、通用原子类
- CSS reset：标签在浏览器里有默认的样式，不同浏览器的默认样式会有差别。例如：ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而在Firefox下，它的缩进却是由padding实现的。
- 通用原子类：一系列常用的基本类，包括：文字，定位，宽高，边距
文字：font-size，line-height，text-align
定位：float，clear，position
宽高：width，height
边距：margin，margin-top，margin-right，margin-bottom，margin-left，padding，padding-top，padding-right，padding-bottom，padding-left
CSS命名
- 推荐使用英语，不要使用汉语拼音
- 常见命名方法：驼峰命名、划线命名（可以结合两种方法，其中驼峰命名法用于区别不同单词，划线用于表明从属关系）
- 不推荐轻易使用子选择符，多人合作时会有冲突
- 为避免多人合作的冲突，可为page层的各工程师分配一个唯一的标识符，作为前缀
多用组合，少用继承
挂多个class实现最终样式
处理上下margin
- 相邻的margin-left和margin-right是不会重合的
- 相邻的margin-top和margin-bottom会产生重合
所以上下相邻的模块最好统一使用margin-top或者margin-bottom，不要混用
低权重原则——避免滥用子选择器
- CSS选择符权重的规则：
标签——1
class——10
id——100 - 如果CSS选择器权重相同，那么样式会遵循就近原则，哪个选择符最后定义（而不是class名字挂在最后），就采用哪个选择符的样式
<span class="test test2">与<span class="test2 test">没有区别 - 使用子选择器，会增加CSS选择符的权重，CSS选择符的权重越高，样式就越不容易被覆盖，越容易对其他选择符产生影响
- 为了保证样式容易被覆盖，提高可维护性，CSS选择符要保证权重尽可能低
CSS sprite（图片翻转技术）
- 将网站的背景图片合到一张大图片上，减少网页的HTTP请求数，减少服务器压力
- 合并的只能是用于背景的图片，对于
<img src="">设置的图片不能合并 - 大图中每个小图的坐标值都不可轻易改动
CSS hack
- IE条件注释法
<!--[if lte IE6]> <span></span> <![endif]-->
<!--[if lt IE6]> <span></span> <![endif]-->
<!--[if gte IE6]> <span></span> <![endif]-->
<!--[if gt IE6]> <span></span> <![endif]-->
<!--[if ! IE6]> <span></span> <![endif]--> - 选择符前缀法
*html .test{width:60px;}/*IE6*/
*+html .test{width:70px;}/*IE7*/ - 样式属性前缀法
.test{
width:80px;
*width:70px;/*IE6，IE7*/
_width:60px;/*IE6*/
}
a标签的4种状态排序
love hate原则：l（link）ov（visited）eh（hover）a（active）te
hasLayout
触发hasLayout解决IE bug
zoom:1;
zoom无效时，可以设置position:relative;，但会有副作用
块级元素和行内元素
| 块级 | 行内 |
|---|---|
| 独占一行，默认情况下，其宽度自动填满其父元素宽度，即使设置了宽度，仍然独占一行 | 不会独占一行，相邻元素排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以正常设置margin和padding | 水平方向的margin和padding会产生效果，竖直方向的margin和padding不产生边距效果 |
display:inline-block和hasLayout
- 为了兼容IE，display能用的类型只有inline，block，none。IE6和IE7不支持display:inline-block;
- inline-block：可以设置长宽，可以设置margin和padding值，但却不是独占一行
- 如果对行内元素触发hasLayout，就可以模拟display:inline-block的效果
行内元素{display:inline-block;}即可触发hasLayout
只能对行内元素实现
img标签和button标签都具有display:inline-block;的特性，可以设置长宽但不独占一行
relative，absolute和float
这个我之前写过一篇博客，列了一个表格进行了对比，传送门
补充一个position各个值的描述
position: static;
- position的默认值，元素将定位到它的正常位置，其实也就相当于没有定位
- 元素在页面中占据位置
- 不能使用top，right，bottom，left移动元素位置
position: relative;
- 相对定位，相对于元素的正常位置来进行定位
- 元素在页面中占据位置
- 可以使用top，right，bottom，left移动元素位置
position: absolute;
- 绝对定位，相对于最近一级的、定位不是static的父元素来进行定位
- 元素在页面中不占据位置
- 可以使用top，right，bottom，left移动元素位置
position: fixed;
- 绝对定位，相对于浏览器窗口进行定位，其余和absolute一样，相当于一种特殊的absolute
position: inherit;
- 从父元素继承position属性的值
居中
水平居中
- 行内元素的水平居中
给父元素设置text-align: center; - 确定宽度的块级元素的水平居中
设置margin-left: auto;和margin-right: auto; - 不确定宽度的块级元素的水平居中
- 将元素包含在table标签内，对table设置
margin-left: auto;和margin-right: auto;
增加了无语义标签，加深了标签的嵌套层数
（table本身不是块级元素，如果不设置其宽度，它的宽度由内部元素的宽度撑起） - 改变块级元素的display为inline类型，然后使用
text-align: center;来实现居中。但存在副作用 - 给父元素设置float，然后父元素设置
position: relative;和left: 50%;，子元素设置position: relative;和left: -50%;来实现水平居中。但存在副作用
- 将元素包含在table标签内，对table设置
竖直居中
- 父元素高度不确定的文本、图片、块级元素的竖直居中
通过给父容器设置相同的上下内边距实现（padding-top，padding-bottom） - 父元素高度确定的单行文本的竖直居中
通过给父元素设置line-height来实现，line-height值和父元素的高度值相同 - 父元素高度确定的多行文本、图片、块级元素的竖直居中
vertical-align: middle;但只有当父元素为td和th时，才会生效
在Firefox和IE8下，可以设置块级元素的display类型为table-cell来激活vertical-align
IE6和IE7并不支持display: table-cell;
所以可以直接使用table，td，默认情况下已经隐式的设置了vertical-align: middle;- 使用hack
在不支持display: table-cell;的IE6和IE7下，通过给父子两层元素分别设置top: 50%;和top: -50%;来实现居中
设置了position: relative;和position: absolute;，会有副作用
z-index
- 激活z-index属性后，如果不设置其值，那么默认为0，但仍然浮于body之上
- 如果多个元素的z-index值相同，那么HTML标签中后出现的元素，会浮在先出现的元素之上
负边距——并未激活z-index，但仍然让元素的位置发生了重叠
浏览器解析页面时，会先判断元素的类型，如果是窗口类型的，会优先于非窗口类型的元素，显示在页面的最顶端，如果同属非窗口类型的，才会判断z-index的大小（select元素在IE6下是以窗口形式显示的）