一：设置背景图片
//单一样式写法
body{
font-size:12px; color:#000;font-family:"微软雅黑", "宋体", Arial;
background-color: #ccc;//背景颜色
background-image:url('/2.jpg');//设置背景图片
background-repeat: no-repeat;//背景图片重复
background-position:50px 30px;//背景图片定位
}
background-repeat: repeat-x;//背景图片重复
background-position:center 0px;//背景图片定位水平垂直居中
background-attachment:fixed;//背景图片固定在某个位置 是否滚动 scroll
//复合样式写法
background:#ccc url('1.jpg') no-repeat 100px 20px fixed;
background: #f7f7f7 url('shu.png') no-repeat 9px 51px;
二：印屏幕：按下快捷键prtsc 粘贴到画图工具里
三：边框的形状是非矩形，跟边框的宽度高度有关，可能是梯形，三角形；
四：三角形
div
{
width:0;
height:0;
border:10px solid #fff;
border-top-color:#ccc;
}
五：设置文字在容器中垂直居中
height:30px; line-height:30px;
也就是让行高和高度一致的时候，文字会垂直居中显示
六：设置文字首行缩进
font-size:12px; text-indent: 2em; 2em = 1*12px ;是根据字体大小进行计算的。
七： 设置字母之间的距离 letter-spacing:10px;
设置单词之间的距离 word-spacing:10px;(已空格作为分割的) 你好 世界
八：强制不换行 换行
white-space:nowrap; white-space:nomal;
九：padding
padding:10px 5px ; 上下10px 左右5px
padding:10px 5px 15px; 上10px 下15px 左右5px
十：margin的外边距问题
1：上下边距会叠压，也就是两个div之间应该是200的间距，却成了100
解决方法：给其中的一个元素方向设置成预想的值 margin：100px 100px 200px 100px 这样的话上边的div和下面的div的距离就是200了
2：父子级包含的时候，子级的margin-top会传递给父级；
解决方法：可以给父级加一个属性 border：1px solid #fff;
十一：a标签超链接伪类
伪类就是给元素添加特殊的效果
link：未访问过的连接的初始颜色 a:link{color:black}
hover：鼠标移入的颜色 a:hover{color:red}
active:鼠标按下的颜色 a:active{color:pink}
visited:访问过后的连接的颜色 a:visited{color：blue}
十二：标签样式初始化
body,h1,h2,h3,h4,h5,h6,p,dl,dd{margin:0};
ul,ol{margin:0;padding:0;list-style:none;}
img{border:none;vertical-align:none;}
a{text-decoration:none;}
十三：block inline inline-block
block:独占一行的元素，比如div p 支持宽度高度margin的设置
inline:不换行，多个元素在一行展示，比如span em 不支持宽度高度margin-top/bottom的设置
inline-block:块在一行显示，支持margin，padding，支持宽高，没有宽度的时候自动撑开宽度
inline-block的问题是：标签之间的换行间隙被解析，比如div之间自带间隙，解决方法就是：
>
十四：HTML 里竖线 “ | ” 符号
一个div 的class为：width:1px; height:50px;background:#ccc;
或者：height:50px;border-left:1px solid #ccc;
十五：定位
1：position:reletive
a：不影响元素本身的特征
b：元素不会脱离文档流（元素移动之后位置仍然保留）
c：如果没有定位偏移量，对元素本身没有影响 top、bottom、left、fight
d：提升层级
2:position:absolute 绝对定位
a：使元素完全脱离文档流 b: 使内嵌支持宽高 c：块属性标签内容撑开宽度
d：如果定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移
e：相对定位一般都是配合绝对定位元素使用 f：提升层级
.parent {position: relative;}
.div5{background: red;position: absolute;top: 200px;left: 100px;}
3：position:fixed 固定定位
基本特征和决定对定位差不多。始终是相对于整个文档进行定位的，ie6不支持；
返回顶部：
.backto{ width: 50px; height: 50px; background: pink;position: fixed;right:10px;bottom: 10px;}
4：position:static 默认值
十六：透明度弹层
.box,.content,.touming{width: 200px;height:200px;}
.box{position: relative;}
.content{background: blue; position: absolute;left: -8px;top:-8px;z-index: 2;}
.touming{background: #ccc;z-index: 1;opacity: 0.5;filter: alpha(opacity:50)/* 兼容ie6-7*/}