HTM、CSS学习总结

基础

动作

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向前