css进阶用法

定位方法

相对定位

添加psition,添加边偏移属性,相对定位改变位置的参照物是自身原来的位置原来位置仍然存在，不会被其他元素侵占

css 复制代码

div{
    /* 改变位置的参照物是自身原来的位置  原来位置仍然存在，不会被其他元素侵占 */
    position: relative;
    top: 100px;
    left: 100px;
}

绝对定位

需要为父级添加相对定位在为子集添加绝对定位这样可以保证样式不会脱标,也不会占位置

css 复制代码

position: relative;
/* 父级相对 */

position: absolute;
/* 子集绝对 */
/* 脱标，不占位置 */

定位居中

水平垂直边偏移为50%, 左,上的外边距为负的尺寸的一半

css 复制代码

img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -128px;
    margin-left: -265px;
    /* 方法二:transform: translate(-50%,-50%);*/
}

固定定位

css 复制代码

/* 1.添加position:fixed; */
/* 2.添加left和top */
/* 3.添加z-index */
img{
    position: fixed;
    top: 0;
    right: 0;
    /* 脱标不占位置 */
    /* 参照物是浏览器窗口 */
    /* 显示模式是行内块 */
}

堆叠层级

为盒子设置z-index 默认是0 数字越大显示顺序越靠上

css 复制代码

box1{
    width: 220px;
    height: 220px;
    background-color: pink;
    z-index: 1;
    /* z-index默认是0 但取值越大,显示顺序就越靠上 */
}

雪碧图的使用

css sprites 用于把很多背景图整合到一张图片中再使用background-position定位,可以提高页面加载速度

创建盒子,盒子尺寸和小图尺寸相同
设置盒子背景图为精灵图

css 复制代码

div{
    width: 112px;
    height: 110px;
    background-color: skyblue;
    background-image: url(./images/abcd.jpg);
    background-position: -256px -276px;
}

icon

1.引入样式表
2.在引用后边添加具体图标类名
3.设置字体大小

css 复制代码

.icon-camera{
    font-size: 30px;
}

html 复制代码

 <span class="iconfont icon-camera"></span>

css特殊属性

垂直对齐属性

Vertical-align垂直对齐方式

vertical-align: middle专门用来处理行内块和行内垂直方向对齐方式 baseline 基线对齐(默认) top 顶部对齐 bottom 底部对齐

使用方法:谁站的面积大给谁加垂直对齐方法

css 复制代码

img{
    vertical-align: middle;

    /* vertical-align: top; */
    /* 最高内容的顶部 */

    /* vertical-align: bottom; */
    /* 出现在最高内容的底部 */
}

css过渡属性

transition(是复合属性) 将一个元素在不同状态下切换

1.需要添加过渡的属性(可以写具体要变化的css 也可以写all两个状态只要属性不同就产生变化)
2.过渡的时间
3.transition属性加给元素本身

css 复制代码

img{
    position: relative;
    width: 200px;
    height: 200px;
    /* 过渡的时间 */
    transition: all 1s;
}
img:hover{
    width: 400px;
    height: 400px;
}

透明度属性

opacity 取0~1.取0全透明取1不透明

css 复制代码

/* opacity取值0~1 0表示全透明 1表示不透明 */
div{
    width: 300px;
    height: 300px;
    background-color: pink;
    opacity: 1;
}

cursor改变鼠标光标

复制代码

<!-- cursor 改变光标类型 -->
<!-- defauit 默认箭头 -->
<!-- pointer 小手 提醒点击 -->
<!-- text 提醒输入文字 工字型 -->
<!-- move 十字光标 移动 -->
<!-- wait 转圈光标 等待 -->
<!-- help 问号 帮助 -->
<!-- not-allowed 禁止 -->
div{
    width: 200px;
    height: 200px;
    background-color: pink;
    cursor: none;
}

平面转换

平移

transform :translate(x轴 y轴) 其中 translate（）只写一个值表示x轴方向移动两个值表示x轴和y轴方向移动移动的单位是像素单位

translateX（）表示x轴方向移动
translateY（）表示y轴方向移动

css 复制代码

transform: translate(100px,100px);

旋转

transform rotate （旋转角度）单位 deg 取正顺时针取负逆时针

css 复制代码

transform rotate （旋转角度）单位 deg

旋转默认为中心旋转 transform-origin:方位名词left top ...

css 复制代码

transform-origin: right bottom;

多重转换

如果想实现连贯的变换动作需要将连贯的动画写在一起不能分开写分开写那么实现的效果会断开而且不是同时进行

先平移再旋转

css 复制代码

transform:translate() rotate()

旋转会改变坐标轴的方向多重转换时坐标轴以第一种变化的方向为主

不能分开写分开写只会生效最后一个

css 复制代码

transform: translate(5000px) rotate(3600deg)  ;

缩放

trasnform:scale（缩放倍数）如果填两个数那就分别表示x轴和y轴的放大倍数

scale 基于中心向四周放大缩小

css 复制代码

/* 1大小不变 小于1缩小 */
transform: scale(1.5);

倾斜

倾斜 skew（deg）正数向左倾斜负数向右倾斜

css 复制代码

transform: skew(36deg);

渐变

线性渐变

多个颜色逐渐变化的效果一般用设置盒子背景

线性渐变从一边到另一边线性变换

background-image:linear-gradient(1.渐变方向 to+方位名词 2.颜色1 终点位置。。。)

css 复制代码

background-image:linear-gradient(to right, red ,green);
background-image: linear-gradient(45deg,red,green);
background-image: linear-gradient(red 80%,green);

径向渐变

bgi:radial-gradient:( 半径 at 园心位置如果写两条半径就是椭圆，颜色1 位置，颜色2 位置)

css 复制代码

background-image: radial-gradient(50px at 50% 50%,red,green);

空间转换

空间xyz轴平移

空间（3d）转换中的z轴和视线方向相同 z的正数方向指向用户

transform:translate3d(x,y,z) 或者写translatex()等等

默认状态下z轴的平移看不见

css 复制代码

transform: translate3d(0,0,100px);

视距属性

perspective 指定用户与屏幕的距离添加透视效果近大元小添加给父级 800-1200

css 复制代码

.box{
    /* 一定给直接父级添加视距 */
    perspective: 1000px;
}

空间xyz轴旋转

自定义旋转: rotate3d(x ,y,z,deg)取0~1之间的数字用来自定义旋转轴的位置以及旋转的角度

rotateX(360deg);
rotateY(360deg);
rotateZ(360deg);

/* 和平面旋转是一样的 /
/ 正数顺时针 */
transform: rotateZ(360deg);

立体呈现

transform-style 设置子元素位于3d空间还是平面加给父级如果添加父级就会变为立方体

立体图形实现方法: 1父级添加3d属性 2子级定位 3调整盒子位置使用位移和旋转

空间缩放

css 复制代码

 /* 空间缩放 */
transform: scalex(0.5);
transform: scaleY(2);
transform: scaleZ(2);
/* 3d空间缩放 */
transform: scale3d(2,2,2);

动画

动画就是加强的过度效果实现多个状态之间的变化过程可以控制

1 定义动画

css 复制代码

@keyframes 动画名称{}
form{当前状态的css} to{}类型 和 0%{} 10%{}.....100%{}类型

2.调用动画

给需要动画的标签加 animation: 动画名称动画时间动画执行次数动画执行方式

css 复制代码

@keyframes change{
    /* 百分比是动画时长的百分比 */
    0%{
        background-color: pink;
        width: 200px;
    }
    50%{
        background-color: orange;
        width: 800px;
    }
    100%{
        background-color: pink;
        width: 200px;
    }
}
.box{
    width: 200px;
    height: 100px;
    background-color: pink;
    animation: change 2s;
}

复合属性

animation 动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态

animation: change 3s linear 2s 3 alternate;

如果写infinite 表示无限循环
alternate 表示动画交替执行
动画执行完毕的状态不能出现无限循环
forwards 动画执行完毕时状态为结束状态
backwards 动画执行完毕时状态为开始状态默认的
速度曲线控制动画匀速（linear）加速或减速
steps(n)将动画分为n步完成主要配合精灵图实现精灵动画
动画时长和名称必须写属性不分先后如果有两个时间第一个是动画时长第二是延迟时间

拆分属性

css 复制代码

/* animation 拆分属性测试*/
    animation-name: change;
    /* 动画时长 */ 
    animation-duration: 2s;

    /* 动画延迟时间 */
 animation-delay: 1ms;

    /* 动画执行完毕状态 */
  animation-fill-mode: forwards;

    /* 动画速度曲线 steps（）逐帧动画 */
   animation-timing-function:  leaner; 

    /* 动画执行次数 */                    
    animation-iteration-count: infinite;

    /* 动画方向 */
    animation-direction: alternate;

}
.box:hover{
    /* 暂停动画 通常搭配hover使用 */
    animation-play-state: paused;
}
@keyframes change{
    from{
        background-color: pink;
        width: 200px;
    }
    to{
        background-color: orange;
        width: 800px;
    }
}

逐帧动画

ainimation-timing-function:steps()

精灵动画准备显示区域移动背景图(移动距离就是精灵图的宽度) step(精灵小图个数)

css 复制代码

.box{
    margin: 100px auto;
    width: 140px;
    height: 140px;
    background-image: url(./images/bg.png);
    animation: move 1s steps(12) infinite;
}
@keyframes move{
    from{
        background-position: 0;
    }
    to{
        background-position: -1680px;
    }
}

多组动画

多组动画在animation属性后面调用多个动画名称用逗号隔开

css 复制代码

animation: run 1s steps(12) infinite,move 12s linear infinite;

响应式布局策略

媒体查询

可以将媒体查询理解为if else,每当检测到视口宽度到对应的大小后就执行对应的css

css 复制代码

/* 检测视口宽度为375px时 body背景色变为pink*/
@media(width:375px){
    body{
        background-color: pink;
    }
}
/* 当前的rem布局方案 将网页分成十等分 html字号为视口宽度的1/10 */
/* 视口宽度为320像素 */
@media(width:320px){
    html{
        font-size: 32px;
    }
}/* 依次类推即可 */

rem适配方案

基础用法

rem(相对单位)是相对于html标签字号的计算结果 1rem就是1html字号的大小

使用rem 1 给html加字号

css 复制代码

html{
    /* 默认16px */
    font-size: 30px;
}
/* 给宽高加rem  */
div{
    height: 5rem;
    width: 3rem;
    background-color: pink;
}

rem与px的转换

我们假设设计稿的视口是375px 计算x像素是n个rem

n*37.5（基准根字号）=x

vw/vh视口适配方案

基本使用

vw 和 vh 可以直接实现移动端适配不需要配合js或者媒体查询,vw 与 vh 都是相对视口的单位

vw是百分之一视口的宽

实际尺寸=x vw * 当前视口的宽度的百分之一

x vw = 设计尺寸 / 百分之一视口宽度