CSS移动端

可以相信小冷

已于 2023-03-21 17:57:46 修改

阅读量112

点赞数 1

文章标签： css Powered by 金山文档

于 2023-03-17 12:19:20 首次发布

本文链接：https://blog.csdn.net/qq_59381940/article/details/129616598

版权

移动端

1.字体图标/平面转换/渐变

1.1字体图标

作用：取代了精灵图

展示的是图标，本质是字体

线下用法

利用类名使用(重要)

利用伪元素使用

利用unicode使用

线上用法

线上的引入方式记得添加http:

1.2平面转换

transform属性

1.2.1 位移

语法：transform:translate(水平移动,垂直移动)

位移在移动时不占位置，不脱标

取值：px 或者百分比(参照物是以自身的大小)

盒子垂直水平居中

方法1：子绝父相+margin:left/top;

固定宽高的盒子居中

方法2：子绝父相+transfrom

方法3：子绝父相(子盒子上下左右都赋值为0)+margin:auto;

1.2.2 旋转

语法：transform:rotate(角度)

角度单位

deg 度

turn 圈

正值是顺时针，负值是逆时针

1.2.3 转换原点

语法：transform-origin:原点水平位置，原点垂直位置;

取值

数值px

方位名词

百分比

1.2.4 缩放

语法：transform:scale(x轴缩放倍数,y轴缩放倍数)

一般情况，只为scale设置一个值，表示x，y轴等比缩放

语法：transform:scale(2)

倍数1以上和倍数-1以上的值是放大，倍数1以下和倍数-1以下的值是缩小，不管正负号，只比较值

倍数1和倍数-1效果一致，盒子不变

图片加了缩放，层级会比定位默认的层级大

1.2.5倾斜

transform:skew(50deg)

注意

1.正值向右倾斜，负值向左倾斜

2.倾斜会把盒子撑大

3.倾斜的盒子不要为直角

1.2.6 transform复合写法

transform：translate() rotate() scale() skew();

1.3渐变

线性渐变色，默认从上往下，开始渐变

语法

background-image:linear-gradient(颜色1,颜色2);

background-image:linear-gradient(to bottom,颜色1,颜色2);

background-image:linear-gradient(60deg,颜色1,颜色2);

常用写法：background-image:linear-gradient(transparent,rgba(0,0,0,.5));

径向渐变

background-image:radial-gradient(颜色1,颜色2);

形状1：正方形->圆形

形状2：长方形->椭圆

只能从内往外

2.空间转换/动画

空间转换(了解)

位移

transform:translate3d(x,y,z)

z轴在默认状态下无法擦看

解决办法

perspective属性实现透视效果

透视的内容要居中，如果不放在盒子中间，会导致内容发生倾斜

加给父级

perspective：值；数值一般在800-1200像素

透视不会使盒子变大

旋转

transform:rotate3d(x,y,z,角度度数) x,y,z取值0-1之间的数字

x轴上下转，正值从下往上转，负值从下往上

y轴左右转，正值从左往右，负值从右往左

z轴，正轴顺时针，负值逆时针

开启3d

transform-style:preserve-3d;

推荐给父元素加

缩放

transform:scale3d(倍数)

动画

补间动画

步骤

1.定义动画

@keyframes 动画名称 {

from {}

to{}

}

@keyframes 动画名称 {

0% {}

10%{}

30%{}

100%{}

}

2.使用动画

animation:动画名称，动画花费时长

animation: 动画名称持续时间动画曲线何时开始动画重复次数是否逆向播放规定动画结束后状态

逐帧动画

steps(帧数)

配合精灵图使用

3.移动端布局

3.1移动端需了解的知识

分辨率

物理分辨率是生产屏幕时就固定的，它是不可被改变的

逻辑分辨率是由软件（驱动）决定

二倍图

视口

布局视口 980px 手机自带

视觉视口手机设备的大小

理想视口设备有多宽，网页显示多宽布局视口+视觉视口保持一致

<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端视口适配标签    
viewport   视口
	宽度=设备宽度  width=device-width
	缩放倍数默认一倍  initial-scale=1.0
	最大缩放倍数为一倍  maximum-scale=1.0
	0和no表示不允许用户缩放，yes表示允许用户缩放  user-scalable=0
        百分比布局   宽度使用百分比，高度固定

3.2flex布局

1.作用

避免浮动布局中脱离文档流现象发生

Flex布局非常适合结构化布局

2.不脱标

3.弹性容器加入了display:flex;的盒子

弹性盒子是弹性容器的子元素

4.设置方式

给父元素添加 display：flex

5.弹性盒子不会区分你是否是块级/行内/行内块元素

flex排列方式

1.主轴排列方式

justify-content属性加在父元素上

flex-end 终点开始依次排列

center 水平居中

space-around 外边距1:2排列盒子，自适应

space-between 两边靠边，中间自适应

space-evenly 外边距1:1排列自适应

2.单行侧轴排列方式

2.1 align-items属性加在父元素上

center 沿侧轴居中排列

默认值 stretch 子元素未设高时，子元素高度默认和父元素一致

flex-end 侧轴终点开始排列

flex-start 默认值侧轴起点排列

2.2 align-self 加在子元素上

center 沿侧轴居中排列

默认值 stretch 子元素未设高时，子元素高度默认和父元素一致

flex-end 侧轴终点开始排列

flex-start 默认值侧轴起点排列

3.伸缩比

属性：flex:值；

取值：数值(整数)

在子元素没设置宽的情况下

这个属性是用来替换宽度的

注意：

只占用父盒子剩余尺寸

给子盒子添加

比例会优先于宽度生效

应用场景

圣杯布局

左右两边的大小固定不变，中间宽度自适应

给一个宽度最小值

修改主轴方向

flex-direction属性

row 行, 水平(默认值)

column 列, 垂直

row-reverse 行, 从右向左

column-reverse 列, 从下向上

5.弹性盒子换行

flex-wrap：wrap；

弹性盒子默认是不换行的

换行的前提就是给子盒子设置固定的宽度

6.多行侧轴排列方式

align-content属性

center 垂直居中

space-around 垂直方向外边距1:2排列盒子，自适应

space-between 垂直方向两边靠边，中间自适应

space-evenly 垂直方向外边距1:1排列自适应

4.注意点

1.display无法触发过渡

使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。

div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transition。

原因

display:none的时候，页面文档流中将不会存在该元素，display:block的时候，文档流中才存在该元素。transition属性无法对一个从无到有的元素进行过渡显示。

解决方案

使用visibility替代display，或者opacity也可以

2.子级为伪元素，必须通过亲父亲进行查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .bigbox {
            width: 1200px;
            height: 300px;
            margin: 0 auto;
        }
        .box {
            position: relative;
            float: left;
            width: 390px;
            height: 300px;
            margin-right: 10px;
            overflow: hidden;
        }
        .box img {
            width: 100%;
            height: 100%;
            transition: all 1s;
        }
        .box:hover img {
            transform: scale(1.2);
        }
        .box a::before {    //注意！！！
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(transparent,rgba(0,0,0,.5));
            opacity: 0;
            z-index: 99;
        }
        .box a:hover::before {   //注意！！！
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="box">
            <a href="">
                <img src="../images/huawei.jpg" alt="">
            </a>
        </div>
        <div class="box"><a href="">
            <img src="../images/huawei.jpg" alt="">
        </a></div>
        <div class="box"><a href="">
            <img src="../images/huawei.jpg" alt="">
        </a></div>
    </div>
</body>
</html>

3.涉及陌生单词

evenly 均匀的

space空间

justify 使每行排齐

4.flex圣杯布局常用

min-width 最小值 min-with:100px 最小值不会小于100

max-width 最大值 min-with:500px 最大值不会大于500