css3学习笔记

1，transition是过度效果，一般是和hover一起用，transition的属性有height，width常用属性，在hover里面就是会覆盖原来的属性，属性由逗号间隔，各个属性之间没有先后关系，-webkit-transition: width 2s ease-in,height 2s, -webkit-transition: 2s width ease-in,height 2s, 都是正确的，有一点需要注意的是，延迟发生，width 1s 20s 延迟的20s会在过度时间的后面。

example1 {            position: absolute;            bottom: 10px;            margin:auto;            background-color: #00B83F;            height: 200px;            width: 200px;            overflow: hidden;            -webkit-transition: width 2s ease-in,height 2s,-webkit-transform 2s;      }

    example1:hover {        width: 300px;        height: 300px;        -webkit-transform: rotate(180deg);    }```

2，tranform:translate(X,Y), 让元素偏离原来位置。单位默认是像素。
transform:scale(X,Y) 让元素变为原来的多少倍。

div:hover {animation: 1s rainbow 3;} 要用@keyframe 定义一个动画名称，就是一个函数。

这些都是css3的属性，transform还可以当作一个函数用在transition里面。

定义动画的函数里面可以有位置的改变。

 0%   {background: red; left:0px; top:0px;}    25%  {background: yellow; left:200px; top:0px;}

动画和transiton交叉使用，在动画的大背景之下，在动画的各个时间点设置transform ，在基元素上面设置transition，只要动画变化过程中有属性和基元素不一致，都会触发到transition。

div{    width:100px;    height:100px;    background:red;    position:relative;    animation:myfirst 5s;    -webkit-animation:myfirst 5s; /* Safari and Chrome */    -webkit-transition : width 2s ,-webkit-transform 2s}@keyframes myfirst{    0%   {background:red; left:0px; top:0px;}    25%  {background:yellow; left:200px; top:0px; -webkit-transform :rotate(192deg);width : 200px}    50%  {background:blue; left:200px; top:200px;}    75%  {background:green; left:0px; top:200px;}    100% {background:red; left:0px; top:0px;}}

动画属性里面，alternate infinite alternate 要在infinite使用的前提下才生效。

3，column-count 是指定元素被分割的列数，带有rule的，是指两列之间边框的样式，可以用一个column-rule ：px（多宽） solid（之间的样式） #FFFF（颜色） 。column-gap是两列之间的距离。-span 指出元素可以跨多列，不够位置就换行显示。

4，响应式布局 @media only screen and (max-width :800px) 在屏幕小于800px的时候启动另外一种布局。（这里的screen可以是print等其他设备，only | not）
固定盒子的大小，无论怎么改变边距都不影响 box-sizing: border-box; 宽度还是50%而不是50%+*px 会并行显示。

5 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

6，<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 使用于移动端，不适用的话，默认移动端的浏览器的宽度会大于浏览器的宽度。