day08

A

一、公共样式提取

样式复用，提高效率
基本的css三层结构：
base.css common.css page.css
对应于普遍适用，公司适用，项目适用

二、css2d转换--transform属性

transform属性值：
//位移
translate(x,y)
x,y值为px时位移px距离，值为百分比时，位移自身高宽*百分比
//旋转
rotate()
n为旋转度数，单位deg
//缩放
scale(x,y)
x,y为数值时，分别代表水平垂直缩放x,y倍
//倾斜
skew(x,y)
x,y为度数，分别在水平，垂直上倾斜x,y度
skew(x,y)属性中，x+y=90时，图形会消失（拉平成一条线），x+y=180时，图形不会改变，x=y时，图形为一对角为x,y的菱形

写法：
transform:translate(x,y);
transform:rotate(n);
transform:scale(x,y);
transform:skew(x,y);

三、（css2d转换的）过渡--transition属性，配合hover使用

transition：要过渡的属性名1 过渡时间1，要过渡的属性名2过渡时间2...；
.transition-test {
            width: 150px;
            height: 150px;
            background-color: #6149ff;
            transition: all 0.3s;
        }

        .transition-test:hover {
            transform: translate(0, -5px);
            box-shadow: 0 0 5px 3px #a37aff;
        }

四、层级定位（position）实现垂直水平居中的三种写法

方法一：
<div class="parent">
  <div class="child">
  </div>
</div>

<style>
.parent{
width:500px;
height:500px;
background-color:#000;
position:relative;
}

.child{
width:200px;
height:200px;
background-color:#fff;
position:absolute;

top:50%;
left:50%;

margin-top:-100px;
margin-left:-100px;
}
</style>

方法二：
对方法一中最后2行相同效果的不同写法
transform:translate(-50%,-50%);

方法三：
对方法一中最后4行相同效果的不同写法
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
最简单但看起来不科学...

B

一、公共样式提取

样式复用，提高效率
基本的css三层结构：
base.css common.css page.css
对应于普遍适用，公司适用，项目适用

二、css2d转换--transform属性

transform属性值：
//位移
translate(x,y)
x,y值为px时位移px距离，值为百分比时，位移自身高宽*百分比
//旋转
rotate()
n为旋转度数，单位deg
//缩放
scale(x,y)
x,y为数值时，分别代表水平垂直缩放x,y倍
//倾斜
skew(x,y)
x,y为度数，分别在水平，垂直上倾斜x,y度

写法：
transform:translate(x,y);
transform:rotate(n);
transform:scale(x,y);
transform:skew(x,y);

三、（css2d转换的）过渡--transition属性，配合hover使用

transition：要过渡的属性名1 过渡时间1，要过渡的属性名2过渡时间2...；
.transition-test {
            width: 150px;
            height: 150px;
            background-color: #6149ff;
            transition: all 0.3s;
        }

        .transition-test:hover {
            transform: translate(0, -5px);
            box-shadow: 0 0 5px 3px #a37aff;
        }

四、层级定位（position）实现垂直水平居中的三种写法

方法一：
<div class="parent">
  <div class="child">
  </div>
</div>

<style>
.parent{
width:500px;
height:500px;
background-color:#000;
position:relative;
}

.child{
width:200px;
height:200px;
background-color:#fff;
position:absolute;

top:50%;
left:50%;

margin-top:-100px;
margin-left:-100px;
}
</style>

方法二：
对方法一中最后2行相同效果的不同写法
transform:translate(-50%,-50%);

方法三：
对方法一中最后4行相同效果的不同写法
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
最简单但看起来不科学...

C