今天我學(xué)到了什么苦掘？
三種垂直水平居中方案
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轉(zhuǎn)換
transform:translate(x,y) rotate(30deg)
//位移
translate(x,y)
//旋轉(zhuǎn)
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位移
該元素移動(dòng)的位置，取決于寬度（X軸）和高度（Y)
translate(x,y) x橫坐標(biāo)方向移動(dòng)的距離,y縱坐標(biāo)方向移動(dòng)的距離div#div2
//HTML
<div class="one"></div>
//CSS
.one{
width: 100px;
height: 100px;
background-color: red;
transform: translate(100px,100px);
}
2.2旋轉(zhuǎn)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軸）的參數(shù)
//scale（2,3）轉(zhuǎn)變寬度為原來(lái)的大小的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齿风、過(guò)渡（transition）
過(guò)渡（transition）配合hover使用
//改變寬度時(shí)長(zhǎng)為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旋轉(zhuǎn)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軸）的參數(shù)
//scale（2,3）轉(zhuǎn)變寬度為原來(lái)的大小的2倍，和其原始大小3倍的高度绑蔫。
//HTML
<div>
</div>
//css
div{
width: 100px;
height: 100px;
background-color: red;
transform: scale(2,0.5);
}
2运沦、CSS2d轉(zhuǎn)換
//HTML
<div></div>
//css
div{
width: 100px;
height: 100px;
background-color: red;
transform: skew(30deg,30deg) translate(100px) rotate(100deg) scale(2,2);
}
