只是总结了一些平时容易忘记的知识点，太基础的没摘录，望大家不喜就喷。
0.HTML和CSS
1.标签子元素
/*a盒子下面的第一个b元素，注意b元素必须为a元素下面的第一个元素，否则失效*/
.a > b:nth-child(1){
color:red;
font-size:red;
}
.ul1 > li:nth-child(1):修饰class=ul1的第1个li子元素
.ul1 > li:nth-child(2):修饰class=ul1的第2个li子元素
.ul1 > li:nth-child(3):修饰class=ul1的第3个li子元素
2.边框
boder-radius:设置边框圆角，设置为50%为一个圆；
box-shadow:10px 10px 5px red;/x,y方向偏移量，透明度，颜色/
transition:transform 2s;旋转效果两秒内平滑完成；
transform:rotate(50deg);旋转50度
text-decoration:none 去掉文字的下划线
text-decoration:underline; 下划线
text-decoration:line-through; 删除线
list-style: none;去掉li 的圆心
border:solid 1px red; 设置容器的边框线为1px，实线solid,dashed虚线,dotted点,红色，会占实际宽高
outline:solid 1px red; 设置容器的边框线为1px，实线,红色，不会占实际宽高
line-height:30px;行高，设置文字垂直居中方式,如果行高值等于容器的值就会垂直居中
text-align:center/left/right; 设置文字水平居中方式, 居中/靠左/靠右
letter-spacing:5px; 设置每个字符间距
3.white-space
white-space: normal; 默认空白处理，忽略空白；
white-space: pre;保留空白符；
white-space: pre-line;容器宽度不够时，自动换行
4.background
background-color:black;背景颜色
background-image:url("../images/b.jpg");
background-repeat: no-repeat;背景图不重复
background-repeat: repeat-x;重复水平方向
background-repeat: repeat-y;重复垂直方向
background:url("../images/b.jpg") no-repeat;
5.list-style
list-style:none; 去掉li的圆心
list-style:disc;实心圆
list-style:circle;空心圆
list-style:square;实心正方形
list-style:decimal; 数字1.2.3
6.内外间距
左外间距
margin-left:30px;
margin-top:40px;
上，右，下，左
margin:30px 100px 200px 100px;
内间距
padding:30px 100px 100px 100px;
盒子实际宽高=height/width + padding + border
7.border
border:solid 10px blue;
border-right:solid 10px blue; 右边框线
border-top:solid 10px blue;; 上边框线
border-left:solid 10px blue;;左边框线
border-bottom:solid 10px blue;底部边框线
margin:auto;实现相对外部容器的水平居中
8.选择器
1：ID选择器 #id{}
2：类选择器 .class{}
3：标签选择器 div{}
4：后代选择器
语法：div p
作用：选择 div 里面的所有p元素，不论是第一代，还是第二代
div .p
作用：选择所有div的后代中class="p"的元素，后代不论是第一代，还是第二代
div .p #nav
作用:选择所有div的后代中class="p"的后代中ID=nav的元素
5：子代选择器：
语法：div > p
作用：只选择第一代元素
6：相邻兄弟选择器
语法：div + p
作用：只选择div后面的第一个p元素，注意是相邻的第一个。
7：兄弟选择器
语法：div ~ p
作用：选择div后面的所有p元素
选择器的优先级：标签<类选择器<ID选择器
9.a标签
a标签的几种状态：
a:link 未访问状态
a:visited 已访问状态
a:hover 鼠标移上状态
a:active 激活选定状态：鼠标单击但未释放
定义锚链接的步骤：
1：定义锚
<a name="名字"></a>
<a name="bottom"></a>
2：链接锚
<a href="#锚的名字"> 文字</a>
<a href="#bottom">跳到底部</a>
10.样式
1:内部样式
<style>
</style>
2:行内样式
<span style="font-size:20px;color:red">10</span>元
3:外部样式
<link href="css的路径" rel="stylesheet"/>
行内样式优先级最高, 内部样式和外部样式谁后加载就优先
11.一些常用css3标签用法
border-radius:2px; //单位是圆角的弧度
border-radius:50%; 圆
box-shadow:10px 10px 5px 颜色
第1，2个参数是设置阴影x，y方向，第3个参数设置阴影的透明度，
第4个参数设置阴影的大小范围，第5个参数设置阴影的颜色。
box-shadow:-5px -5px 20px 2px black;
background-size 属性规定背景图片的尺寸。
在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸和容器的大小决定的。
在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background-size: 200% 200px;
div{
background:url(bg_flower.gif);
}
在 CSS3 中，text-shadow 可向文本应用阴影。
h1{
text-shadow: 5px 5px 5px #FF0000;
}
rotate() 方法
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div{
transform:rotate(50deg); //旋转50度
}
transform: rotate3d(1,1,1,50deg);
translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
div{
transform: translate(50px,100px);
}
scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
实例
div{
transform: scale(2,4);
}
skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
实例
div{
transform: skew(30deg,20deg);
}
应用于宽度属性的过渡效果，时长为 2 秒：
div{
transition: width 2s;
}
实例
向宽度、高度和转换添加过渡效果：
div{
transition: width 2s, height 2s, transform 2s;
}
transition:0.7s; 所有效果都在0.7秒内过渡完成
如果是img只能缩放scale()
div可以直接设置宽高用transition过渡完成
//缩放0.5倍，同时x,y移动50px
transform: scale(0.5,0.5) translate(50px,50px);
//针对transform的效果变化全部在2s内完成
transition:transform 1s,width 2s;
//所有效果变化都在2s内完成
transition-duration: 2s;
动画
@keyframes myfirst 定义动画,名称叫myfirst
{
from {background: red;}
to {background: yellow;}
}
把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div{
animation: myfirst 5s;
}
