DAY02

Css
缩放
等比例缩放:
 /* scale缩放(倍数) */
 transform: scale(0.5);
可以缩放X轴和Y轴
 /* scale(x,y) */
transform: scale(1,2);

既要旋转又要缩放

transform:rotate(225deg) scale(1);

不能分开写两个transform，否则后面写的会把前面的覆盖
定位
id #
     class .英文的点 类
       拿省份证做对比，id相当于省份证号不能重复，class相当于姓名，可以重复 
  position: absolute;
        position定位  absolute 绝对定位  
   加上绝对定位以后，这个盒子就不占位 
       
绝对定位和相对定位:

 position: absolute;

相对定位：相对于自身位置定位的，占位（不脱离文档流）；

position:relative;
绝对定位：
相对于自己最近的父级有定位的元素,不占位（脱离文档流）；

口诀：父相子绝

定位位置属性：top/bottom/left/right

绝对居中:

```css
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
```

层级关系

层级关系： z-index

值越大层级越高

定义动画的关键帧

关键帧范围：0%~100%
            animation:round 4s infinite linear alternate;(起到联系定义动画的关系)
  linear(匀速) alternate 往返 
        @keyframes round {
            0% {
                top: 0;
                left:0;
            }25%{
                top:0;
                left:500px;
            }50%{
                top:500px;
                left:500px;
            }75%{
                top:500px;
                left:0;
            }100%{
                top: 0;
                left:0;
            }
   
边框
设置边框:border

      border-color:black;(边框颜色)  
        border-width: 5px;(边框粗细)
        border-style: solid;(边框样式)
        border:5px solid black(简单写法)
border:线条粗细 线条样式 线条颜色

solid 实线
     dotted 点状虚线
     double 双实线
     dashed 线状虚线
变形基点
变形的基点：1.设置水平方向，2.设置垂直方向 
          具体值:center  left right top bottom
          默认值:center center
            
            transform-origin: right bottom;
            transform: rotate(45deg);

外边距

设置外边距：margin

margin-left:10px;
            margin-right:20px;
            margin-top:30px;(有BUG)
            margin-bottom:50px;
            
            margin:四个方向值是一样;
            margin:上下  左右;
            margin:上 左右  下;
            margin:上 右 下 左;
margin:auto
如果左右设置auto，自动左右居中上下auto不起作用