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;
最简单但看起来不科学...
网友评论