A我今天学到了什么
垂直水平居中的3种方法
1.用transform垂直水平居中
<div class="one">
<div class="tuo"></div>
</div>
<style>
.one {
width: 200px;
height: 200px;
background-color: red;
position: relative
}
.tuo {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
transform: translate(-50% -50%);
left: 50px;
top: 50px
}
</style>
2.用position水平居中
<div class="one">
<div class="tuo"></div>
</div>
</body>
<style>
body,html{
width:100%;
height:100%;
position: relative;
}
.one {
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
top: 50%;
left: 50%;
background-color: #01aef0;
position: absolute
}
</style>
3.left，top，bottom，right都为0实现水平居中
<body>
<div class="one">
<div class="tuo"></div>
</div>
</body>
<style>
.one {
width: 400px;
height: 400px;
background-color: red;
position: relative
}
.tuo {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
</style>
公共样式的提取
CSS2d 的转换
transform:translate(x,y) rotate(30deg)
//位移（）旋转()
translate(x,y)
//位移
rotate()
//旋转
scale(x,y)
//缩放
skew(x,y)
//倾斜
配合transform
<div class="body">正常</div>
<div class="top">位移</div>
<div class="right">旋转</div>
<div class="left">缩放</div>
<div class="bottom">倾斜</div>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
.top{transform: translate(200px,100px)}
.right{transform: rotate(30deg)}
.left{transform: scale(0.8,0.8)}
.bottom{transform: skew(30deg)}
</style>
translate位移
该元素移动的位置，决定于宽度（x轴）和高度（y轴）
translate(x,y)
//x轴坐标方向移动的距离，y纵坐标方向移动的距离div1#div2
rotate旋转
该元素旋转的位置决定于角度的大小
rotate（deg）
scale缩放
scale缩放（）方法，该元素增加或减少的大小，取决于宽度（x轴）和高度（y轴）的参数。
//scale(2,3)转变宽度为原来的大小的2倍和其原始大小3倍的高度
skew倾斜
倾斜skew(x,y)方法
//代表水平方向，y轴代表垂直方向
transition过渡
CSS3过渡（transition）配合hover使用//改变宽度时长为2s
div{transition:width:2s}
div:hover{width:100px;}
多项变化
div{
transtion:width2s,height2s,transform2s;
//transtion:all 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(300deg）}
//HTML
<div class="box"></div>
.box {
width: 200px;
height: 200px;
background-color: aqua;
transition: 10s all;
}
.box:hover {
width: 500px;
height: 500px;
background-color: pink;
transform: rotate(180deg) scale(0.8, 0.5);
}
B我今天掌握了什么
垂直水平居中的3种方法
1.用transform垂直水平居中
<div class="one">
<div class="tuo"></div>
</div>
<style>
.one {
width: 200px;
height: 200px;
background-color: red;
position: relative
}
.tuo {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
transform: translate(-50% -50%);
left: 50px;
top: 50px
}
</style>
2.用position水平居中
<div class="one">
<div class="tuo"></div>
</div>
</body>
<style>
body,html{
width:100%;
height:100%;
position: relative;
}
.one {
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
top: 50%;
left: 50%;
background-color: #01aef0;
position: absolute
}
</style>
3.left，top，bottom，right都为0实现水平居中
<body>
<div class="one">
<div class="tuo"></div>
</div>
</body>
<style>
.one {
width: 400px;
height: 400px;
background-color: red;
position: relative
}
.tuo {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
</style>
公共样式的提取
CSS2d 的转换
transform:translate(x,y) rotate(30deg)
//位移（）旋转()
translate(x,y)
//位移
rotate()
//旋转
scale(x,y)
//缩放
skew(x,y)
//倾斜
配合transform
<div class="body">正常</div>
<div class="top">位移</div>
<div class="right">旋转</div>
<div class="left">缩放</div>
<div class="bottom">倾斜</div>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
}
.top{transform: translate(200px,100px)}
.right{transform: rotate(30deg)}
.left{transform: scale(0.8,0.8)}
.bottom{transform: skew(30deg)}
</style>
translate位移
该元素移动的位置，决定于宽度（x轴）和高度（y轴）
translate(x,y)
//x轴坐标方向移动的距离，y纵坐标方向移动的距离div1#div2
rotate旋转
该元素旋转的位置决定于角度的大小
rotate（deg）
scale缩放
scale缩放（）方法，该元素增加或减少的大小，取决于宽度（x轴）和高度（y轴）的参数。
//scale(2,3)转变宽度为原来的大小的2倍和其原始大小3倍的高度
skew倾斜
倾斜skew(x,y)方法
//代表水平方向，y轴代表垂直方向
transition过渡
CSS3过渡（transition）配合hover使用//改变宽度时长为2s
div{transition:width:2s}
div:hover{width:100px;}
多项变化
div{
transtion:width2s,height2s,transform2s;
//transtion:all 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(300deg）}
//HTML
<div class="box"></div>
.box {
width: 200px;
height: 200px;
background-color: aqua;
transition: 10s all;
}
.box:hover {
width: 500px;
height: 500px;
background-color: pink;
transform: rotate(180deg) scale(0.8, 0.5);
}
C今天没有掌握的
没有
网友评论