基础
动作
link 正常
visited 已阅
hover 停留
active 正点
列表
列表：
list-style-type 标号类型
list-style-position 标号位置
list-style-image 图标url("")
表格
表格
border-collaspse:collapse 合并
选择器
选择器
tr:nth-child(odd奇|even偶)
div:nth-child(1);
注意
margin垂直方向会合并
清除图片、a标签空隙
font-size:0;
块状行内
1、块状元素：
独占一行
div/p/h1/ol/ul/table/form
2、行内元素inline：
width、height不能设置
span/a
3、行内块状元素inline-block：
都可以设置
img
clear:both; 左右都不会有浮动元素
盒子
盒子大小：
box-sizing: border-box;
定位
position:
static默认 z-index无效
fixed 相对浏览器窗口
relative 保留原位置
相对直接父元素
absolute 不保留原位置
相对static定位以外的第一个父元素或者body
三层定位：relative、absolute、absolute
两层定位：relative、absolute
z-index:-999
css3
圆
border-top-left-radius:40px 20px; 左上角,
border-radius:20px;
阴影
box-shadow:
inset 水平偏移、垂直偏移、模糊距离、颜色
insct 可选、内部阴影
outset 默认值、外部阴影
traf + ctrl + e
chrome -webkit-
firfox -moz-
opera -o-
ie -ms-
2D
text-shadow:2px 2px 8px #ccc; 水平，垂直，阴影大小，颜色
长单词、URL强行换行
word-wrap:break-word;normal;
字体
@font-face{
font-family:myname;
src:url('fonts/myname.ttf'),
url('fonts/myname.eot')
}
p{
font-family:myname;
}
3D动作
-
旋转
rotataDiv{
tranform:rotate(30deg); //正30deg
} -
缩放
tranform:scale(1, 0.5); -
平移
transform:translateX(150px);
-
all
0%{
transform:translateZ(0px) scale(1) rotateZ(0deg);
}
过渡
transition:属性名(all)，持续时间，过渡方法
transition-property:all; 对哪个属性进行变换
transitioin-duration 持续时间
transition-timing-function 过度使用的方法(函数)
linear匀速，ease慢快慢，ease-in
animation动画
@keyframes mycolor{
0% {background-color:red;}
30% {background-color:bule}
60% {background-color:yellow;}
100%{background-color:green;}
}
div:hover{
animation:mycolor 5s linear; // n或infinite无数次
//animation-play-state:running|paused;可以设置鼠标悬停时播放和移除暂停
}
3d
transform-style:preserve-3d;
tranform:rotateY(60deg);
x,y,z: z大拇指指向自己
perspective:100px; //舞台,眼睛到舞台的距离，远近不同
方向
x向右，y向下，z向前