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今天沒有掌握的
沒有
