6月实训-day02

目录

         前言

         一、弹性布局

二、图片

三、2D转换

---

---

前言

华清远见实训第二天

一、弹性布局

flex布局

        弹性容器：display：flex；

        容器的子标签(不包括子标签的子标签)：项目（默认水平排列）

        容器默认存在两根轴：水平方向的主轴和垂直方向的交叉轴

设置主轴方向 column row

 flex-direction: column;

设置项目在主轴上面的排列方式 center space-between space-around flex-end

justify-content: center;

 设置项目在交叉轴上面的排列方式 stretch center

align-items: flex-end;

设置项目排不下之后是否换行 设置了之后不会压缩 */

flex-wrap: wrap; 

* .item{ */

            /* width: 200px; */

            /* 设置项目不缩小 */

            /* flex-shrink: 0; */

            /* flex: 2; */

        /* } */

        /* 分成7分,占容器的比例 */

        .item1{

            background-color: rgb(53, 204, 166);

            flex: 2; 

        }

        .item2{

            background-color: rgb(128, 130, 228);

            flex: 3; 

        }

        .item3{

            background-color: rgb(126, 201, 77);

            flex: 2; 

        }

        .item4{

            background-color: rgb(143, 45, 122);

            /* 没有设置就是内容多宽就多宽 */

        }

 

 

 

 

 

 

 

二、图片

rgb(0-255 0-255 0-255)
background-color: darkkhaki; 
rgba(0-255,0-255,0-255,0-1) 
/* a是透明度 */
background-image: url("./草莓.jpg");
/* 设置背景图片是否重复 */
background-repeat: no-repeat;
/* background-size: 背景图片的宽度 背景图片的高度 */
background-size: 700px 700px; 
background-size: 100% 100%;
/* background-position: 背景图片水平方向的位置 背景图片垂直方向的位置*/
/* background-position: -100px 100px; */
/* background-position: 50% 50%; */
/* left right top bottom */
background-position:right  bottom;

---

三、2D转换

怎样将标签进行平移

translate(水平方向平移的大小,垂直方向平移的大小),写在div的样式中。

transfrom:translate(100px,40px)
transfrom:translate(-100px,40px) /*向左平移100*/

缩放: scale

transform:scale(1)/*不缩小也不放大*/
transform:scale(0.5)/*缩小到原来的一半*/
transform:scale(1.2)/*放大到原来的1.2倍*/

旋转:rotate

transform:rotate(30) /*顺时针转30°*/
transform:rotate(-30)/*逆时针转30°*/

鼠标移入

.class类名{
    /*设置div改变的时候变化的速度*/
    transition : transform 0.4s,background-color 0.4s;
    /*设置全部的改变都有过度的效果*/
    transition:all 0.4s;
    overflow:hidden;
}

.class类名:hover{
    /*鼠标移入后才会设置的样式*/
}