day08

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

没有
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容