1. css的出现是为了是内容和表现分离。分为三种：
内联：不推荐
嵌入：没有利用浏览器缓存机制。
外联：
2. css优先级：①id优先级高于class②后面的样式覆盖前面的③指定的高于继承④行内样式高于内部或外部样式
总结：单一(id)的高于共用的(class)，有指定用指定，无指定继承离他最近的。
3. 块级元素：段落<p>、标题<h1><h2>…、列表<ul><ol><li>、表格<table>、表单<form>、DIV<div>、BODY<body>
行内元素：表单元素<input>、超链接<a>、图片<img>、<span>、斜体<em>
块级元素的特点是：每个块级元素都是从新的一行开始，而且其后的元素也需要新起一行显示。
可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。
4. Ie6有一个著名的3像素bug：当浮动元素和非浮动元素相邻的时候，3pxbug就会出现。
要解决这个bug就要在#side这个div上加上_margin-right:-3px;这个前面加上下划线，只针对ie6生效，ie7和ff还正常。
5. Css选择器可以进行分组（比如把标题都设成加粗红色，二级黑色h1,h2,h3,h4,h5,h6 { color:red;font-weight:bolder;} ）
6. 伪类：目前ie6仅支持a的伪类，其他的不支持。
超链接的伪类：a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
（四种状态的顺序一定不能颠倒，否则有些不生效。）
7. 相对定位和绝对定位
定位标签：position 包含属性：relative（相对） absolute（绝对）
① position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）
② position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）
③ 父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角
④ 相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右
8. 浮动后父容器高度自适应:
当一个容器内元素都浮动后，它的高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。如下图：
要解决这个问题，需要使用以下样式
overflow:auto; zoom:1;
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写。
9. CSS Hack
由于不同浏览器对css的解析不一样，因此导致展示的效果也不一样，为了兼容不同的浏览器，就要针对不同的浏览器写不同的css代码，这个过程就叫做css hack 。上面的这个例子就是所谓的css hack.
10. IE6的双倍边距bug
这又是IE6一个著名的bug，也是我们经常遇到的。如上例，当浮动后设置左侧外边距时后，最左侧将显示为双倍边距，比如设置为20，而在IE6下却显示40px，解决这个问题只需应用一个样式，记住就可以了。display:inline;
11. CSS Sprites技术
又叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。
12. 块状元素理论都是占一行的，但是如果你给了她float属性，这时候他的宽度是随着内容自适应的。利用这个原理可以制作自适应宽度按钮等。
13. label标签，合理利用会使页面的用户体验得到提升，可以对表单的说明文字使用label标签，这样当用户点击文字时，光标就定位到表单上了。
14. css样式不能以数字开头命名。否则浏览器不识别。
15. span一般都放在p中，尽量不要放在div中。
16.radio和汉字放在一起总是无法垂直居中，解决办法是在radio上加样式position:relative;top:2px;