day08

今天我学到了什么？

三种垂直水平居中方案

1、margin加position

//HTML
<div class="one">
    <div class="two"></div>
</div>

//CSS
.one {
       width: 400px;
       height: 400px;
       background-color: red;
       position: relative;
 }
.two {
       width: 100px;
       height: 100px;
       background-color: pink;
       position: absolute;
       margin: auto;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
}

2、位移垂直水平居中

//HTML
<div class="one">
<div class="two"></div>
</div>

  //css
.one{
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
.two{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

3、position 定位

//HTML
<div class="phone"></div>

//CSS
body,html{
                width:100%;
                height:100%
          }
          *{
            margin: 0;
            padding: 0;
            }
        body{
            background-color: #cccccc;
            position: relative;
        }
        .phone{
            width: 618px;
            height: 128px;
            background: url(image/phone.png) no-repeat top center;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -309px;
            margin-top: -64px;
        }

1、公共样式的提取

2、CSS2d转换

transform:translate(x,y) rotate(30deg) 
//位移
translate(x,y)
//旋转
rotate()
//缩放
scale(x,y)
//倾斜
skew(x,y)
配合transform属性使用

//HTML
<div></div>

//css
 div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: skew(30deg,30deg) translate(100px) rotate(100deg) scale(2,2);
        }

2.1translate位移

该元素移动的位置，取决于宽度（X轴）和高度（Y)
translate(x,y)  x横坐标方向移动的距离,y纵坐标方向移动的距离div#div2

//HTML
<div class="one"></div>

//CSS
 .one{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: translate(100px,100px);
        }

2.2旋转rotate

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

//HTML
<div>

</div>

//CSS
 div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(30deg);
    }

2.3缩放

scale缩放()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
//scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

//HTML
<div>

</div>

//css
  div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: scale(2,0.5);
     }

2.4 倾斜

skew(x,y) 方法
x表示水平方向,y表示垂直方向
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

//HTML
<div></div>

//CSS
 div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: skew(30deg,30deg) translate(100px) rotate(100deg) scale(2,2);
    }

3、过渡（transition）

 过渡（transition）配合hover使用
//改变宽度时长为2秒
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover{ 
    width:100px;
}

HTML
<div></div>

//CSS
  div{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: width 1s,height 1s,transform 2s ;

        }
        div:hover{
            transform: rotate(90deg);
            width: 200px;
            height: 200px;

        }

今天掌握了什么？

1、margin加position

//HTML
<div class="one">
    <div class="two"></div>
</div>

//CSS
.one {
       width: 400px;
       height: 400px;
       background-color: red;
       position: relative;
 }
.two {
       width: 100px;
       height: 100px;
       background-color: pink;
       position: absolute;
       margin: auto;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
}

2、位移垂直水平居中

//HTML
<div class="one">
<div class="two"></div>
</div>

  //css
.one{
            width: 400px;
            height: 400px;
            background-color: red;
            position: relative;
        }
.two{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

3、position 定位

//HTML
<div class="phone"></div>

//CSS
body,html{
                width:100%;
                height:100%
          }
          *{
            margin: 0;
            padding: 0;
            }
        body{
            background-color: #cccccc;
            position: relative;
        }
        .phone{
            width: 618px;
            height: 128px;
            background: url(image/phone.png) no-repeat top center;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -309px;
            margin-top: -64px;
        }

2.2旋转rotate

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

//HTML
<div>

</div>

//CSS
 div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: rotate(30deg);
    }

2.3缩放

scale缩放()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
//scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

//HTML
<div>

</div>

//css
  div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: scale(2,0.5);
     }

2、CSS2d转换

//HTML
<div></div>

//css
 div{
            width: 100px;
            height: 100px;
            background-color: red;
            transform: skew(30deg,30deg) translate(100px) rotate(100deg) scale(2,2);
        }