基本知识点

将rel属性的值设置为alternate stylesheet 可以定义候选样式表。如果浏览器能使用候选样式表，它会使用lingk元素的title属性值生成一个候选样式列表。
p.warning{ font-weight: bold;}选择器现在会匹配class属性包含warning的所有p元素，但是其他任何类型的元素都不匹配，不论是否有此class属性。
属性选择器： h1[class]{},img[alt]{},img[alt=”测试”],a[href][title] ….选择有当前属性的标签赋予样式。p[class~=”warning”]{},选择class属性中包含warning的元素,等价于p.warning。[foo^=”bar”]:选择 foo 属性值以“bar” 开头的所有元素；[foo$=”bar”]:选择 foo 属性值以 “bar” 结尾的所有元素； [foo*=””bar]: 选择 foo 属性值中包含子串“bar”的所有元素。[lang |=”en”]: 选择lang属性等于en或者以 en- 开头的所有元素，比如 lang=”en”、lang=”en-us”。h1 + p {} 选择紧接在一个 h1 元素后出现的 p 元素，” + “ 选择相邻的兄弟元素。
伪类的顺序很重要： link - visited - focus - hover - active。 p: first-letter{}设置首字母样式。P: first-line{}设置第一行的样式。
css 特殊性：基本上，用 style 属性编写的规则总是比其他任何规则特殊。具有 ID 选择器的规则比没有 ID 选择器的规则特殊，具有类选择器的规则比只有类型选择器的规则特殊。最后，如果两个规则的特殊性相同，那么后定义的规则优先。
盒模型：页面上的每个元素被看做一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。在 CSS 中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
非标准盒模型： width 属性不是内容的宽度，而是内容、内边距和边框的宽度总和。
CSS3 的 box-sizing 属性可以定义要使用哪种盒模型，但是除了一些非常特殊的场合之外很少需要使用这个属性。目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素火子元素。
外边距叠加：当两个或更多垂直外边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。这就是一系列空的段落元素占用的空间非常小的原因，因为它们的所有外边距都叠加到一起，形成一个小的外边距。只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
清除浮动：
（1）添加没意义的标记 “br style=’clear: both ‘“
（2）浮动容器 div
（3） overflow:hidden 属性自动清理包含的所有浮动元素，缺点会产生滚动条或截断内容。
（4）父元素添加 .clearfix::after{ content: ‘’; display: block; clear:both; // zonm : 1 : 兼容IE}
可以通过链接样式： a:link a:visited a:hover a:active（修改背景图）来做出很多有趣的效果，比如按钮翻转、气泡提示框……。

布局

使用自动空白边让设计居中

<body>
   <div id="wrapper">
   </div>
</body>

#wrapper{
   width: 1200px; // 可以是主体的百分数，em
   margin: 0 auto;
}

IE5、IE6不支持自动空白边，会将 text-align:center 误解为让所有东西居中，而不只是文本。

body{
   text-align: center;
   min-width: 1200px; // 防止当浏览器窗口的宽度减少到小于容器的宽度时，容器的左边会跑到屏幕的外边。需要将主体元素的最小宽度设置为等于或略大于容器元素的宽度。
}

#wrapper{
   width: 1200px; // 可以是主体的百分数，em
   margin: 0 auto;
   text-align: left; //兼容IE
}

使用定位和负值空白边让设计居中

#wrapper{
   width: 1200px;
   position: relative;
   left: 50%;
   margin-left: -600px;
}

流体布局，尺寸是百分数而不是像素。
弹性布局，相对于字号来设置元素宽度。
弹性-流体混合布局，以em设置宽度，然后用百分数设置最大宽度。

IE的有条件注释

<!-- [if IE]
   <style type="text/css">
   @import("ie.css");
   </style>
-->

过滤单独的规则和声明，就是利用低版本IE浏览器不支持的某些属性。
（1）子选择器 html>body{}
（2）属性选择器 div[id=”content”]{}
（3）星号 HTML * html{} ，HTML 元素被认为是网页上的第一个元素（根元素）。但是，IE的所有当前版本有一个匿名的根元素，它包围着 HTML 元素。
（4） IE/Mac 注释反斜线

/* Hiding from IE5/Mac \*/
#nav a{
   width: 5em; // 现代浏览器会忽视这条规则
}
/* End Hack */

（5）转义属性

1
2
3

#content{
   w\idth: 100px; // 现代浏览器会忽视'\'符号
}

（6） !important和下划线

#nav{
   position: fiexd !important; // 现代浏览器会应用这条声明
   position: static;
}

#nav{
   position: fiexd; // 现代浏览器会应用这条声明
   _position: static; // 老版本IE会忽视'_'， 并且覆盖第一个规则。
}