使用浮动就一定要同时清除浮动,使用浮动的时候最容易出现的情况就是内容溢出。限制溢出的方法:1.清除浮动 2.同时使用overflow 这个方法比较好 3.单位使用em代替px 。
2.页面居中：
路子1：在要居中的元素外面套一层Div，设置width 并将margin-left， margin-right设置为Auto
路子2：设置text-align为center并应用到body上，遗憾的是我们还要添加一个文本居左对齐的代码，因为内容文本也居中了。
3.清除浮动:
如果一个页面需要分三栏而且有头尾，分出的三栏又宽度高度不统一可以使用#Wraper float的方式，然后Footer使用Clear：both来清除前面定义的浮动定义。
4.IE浏览器会将浮动元素的水平外边距加倍，权宜之计就是添加display：inline
5.文档类型声明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文档类型声明让浏览器和用户（包括搜索引擎）知道你使用的HTML语言类型，是一个健壮文档所必需的。
6. 关于background的写法
DIV.comment{background:#f
1）您可以看到background的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。
7. 关于Border的写法，如果您想定义div的四个边的颜色不同，而粗度和样式都一样，您可以这样写：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上，右，下，左的颜色
8. 为了兼容所有的浏览器都可以显示半透明效果的写法
.tranparent{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity: 50%;
position:absolute;/*注意必须是absolute的*/
top:100px;
left:100px;
}
9. 使用min-height min-width解决div，或者span的固定高度问题
有时候我们需要设定某个元素固定高度，但是在firefox或者opera下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用min-height
10. 使用!important改变样式的优先级
所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的css文件中，一处是在文件的head标签中定义内联css，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式，如果我们需要打破这种规则我们就可以使用!important指令
a.test{color:red !important}
这样即使在A元素内定义了color也不会应用，而是应用上面的定义
11. 使用media指令引入两种css：打印版本的css和屏幕显示的css
<link type="text/css" rel="stylesheet" href="url " media="screen" charset="utf-8" />
<link type="text/css" rel="stylesheet" href="url" media="print" charset="utf-8" />
12. css 的class可以有多个值，我们只需要将多个值用空格隔开就可以了
13. 颜色的缩写 我们可以将#ff0033缩写成#f03
14. 使用text-indent显示图片，而隐藏文字（这种做法据说有助于SEO）
h1{ background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
<h1>Buy widgets</h1>
16. 为了避免不同浏览器对不同标签的padding，margin不同的解释可以在样式表的前面定义
*{margin:0px;padding:0px;}
}
17. 关闭输入法状态，使用户只能输入英文状态下的字符，类似输入密码
input{ime-mode: disabled ; }
18. 同比改变图片大小
img.style.zoom = 0.5;
上传两本书箱：CSS书籍