移动端第三天（flex布局+动画）

聊了
237 阅读8分钟

移动端第三天（flex布局+动画）

动画

使用animation相关属性控制动画执行过程

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

  • animatioin-name:move;动画名称

  • animation-duration:2s; 动画时长

  • animation-timing-function: steps(4);速度曲线

  • animation-delay:3s;延迟时间

  • animation-iteration-count: infinite; 重复次数

  • animation-direction: alternate-reverse; 动画方向

  • animation-fill-mode:both; 动画完毕状态

  • animation-play-state:pused；设置动画的暂停播放

代码块

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 动画名称 */
            animation-name: move;
            /* 动画时间 */
            animation-duration: 1s;
            /* 动画延迟时间 */
            animation-delay: 2s;
            /* 设置动画延迟时间显示 第一个帧  backwards forwards both */
            animation-fill-mode: both;
            /* 设置动画的播放次数 2  */
            animation-iteration-count: infinite;
               /* 
        设置动画的播放的方向  animation-direction

        1 默认值  normal    先正再正      常用
        2 alternate   先正再反   常用
        3 reverse   先反再反
        4 alternate-reverse  先反再正

         */
            animation-direction: alternate-reverse;
            /* 设置动画播放或暂停 */
            animation-play-state: paused;
        }
    
    </style>
</head>
<body>
    <div>动画</div>
</body>
</html>

1，PC端和移动端有什么不同？

PC屏幕大固定版心，移动端小，网页宽度100%

移动端布局和pc端布局区别

pc端

  • 定版心

  • 页面中的元素宽度和高 几乎都是使用 px单位！！ 定死大小

移动端

  • 不会定版心

  • 元素的大小 很少使用 px单位，都会使用 相对长度单位 百分比单位 rem vw vh（没有学过）

  • 屏幕越大。元素也越大

早期移动端布局

百分比布局 也叫在 流式布局

早期布局方案 弊端

不够方便 一旦增加了 元素的方式 对应的 width的代码重新去计算

主流的移动端布局方案

flex布局 好用简单方便 都得要学会用它！！

2.如何显示边写代码边调试效果？

谷歌模拟器

3.屏幕尺寸概念？

硬件分辩率 软件分辩率

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

​ 逻辑分辩率 是由软件（驱动）决定的

思考：制作网页先参考物理分辩率还是逻辑分辩率？

​ 逻辑分辩率

![](移动端第三天(flex布局 小兔鲜).assets/屏幕分辩率.png)

视口

​ 目标：使用meta标签设置视口宽度，制作适配不同设备宽度的网页

![](移动端第三天(flex布局 小兔鲜).assets/视口宽度.png)

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辩率尺寸相同。
思考：默认情况下，网页的宽度和逻辑分辩率相同吗？
不同，默认网页宽度是980px;

理想视口

<!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>
      div {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div>看看我</div>
  </body>
</html>

要网页宽度和设备宽度（分辩率）相同。

解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。

  • viewport:视口

  • width=device-width:视口宽度=设备宽度

  • inital-scale=1.0:缩放1倍（不缩放）

二倍图

目标：能够使用像素大厨软件测量
二倍图中尺寸
  • 现阶段设置iPhone6/7/8,设备宽度375px产出设计稿。
  • 二倍图设计稿尺寸：750px

![图破那](移动端第三天(flex布局 小兔鲜).assets/图破那.png)

三倍图

![3倍](移动端第三天(flex布局 小兔鲜).assets/3倍.png)

百分比布局

目标：

能够使用百分比布局开发网页
  • 百分比布局

  • 效果：宽度自适应 ，高度固定。

Flex布局

目标：能够使用Flex布局模型灵活、快速的网页

思考：多个盒子横向排列使用什么属性？
浮动

设置盒子的间距使用什么属性？

margin
需要注意什么问题？
浮动的盒子脱标。

Flex布局/弹性布局：

1.设置div变成flex 盒子 弹性 flex

2.div中的子元素 发生 一些改变

  • 设置了flex的盒子 称之为 父项
  • 盒子里面的子元素 称之为 子项

3.具体变化

​ 1 不再区分什么 块级行内和行内块 全部都可以设置宽度和高

2.子项 默认的宽度和高度

​ 宽度 由内容撑开

​ 高度 等于父项的高

  1. 子项

    使用浮动没有效果

    使用定位、margin、transform 都有效的**

4.默认情况下 子项总宽度大于父项的宽

也不会换行！！！ flex不会换行

只会压缩自身的宽度而已

Flex布局模型构成

目标: 能够使用Flex布局模型灵活、快速的开发网页

作用
  • 基于flex精确灵活控制块级盒子布局方式，避免浮动布局中脱离文档流现象发生。

  • flex布局非常适合结构化布局

    设置方式 父元素添加display:flex;，子元素可以自动的挤压或拉伸 组成部分 弹性容器 弹性盒子 主轴 侧轴/交叉轴

图片

![](移动端第三天(flex布局 小兔鲜).assets/flex布局方式.png)

主轴对齐方式

目标：使用justify-content调节元素在主轴的对齐方式

思考：网页中，盒子之间有距离吗？

答：有

​ 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的距离。

目标：使用justify-content调节元素在主轴的对齐方式

  • 修改主轴对齐方式属性：justify-content
属性值作用
flex-start默认值，起点开始依次排列
flex-end终点开始依次排列
center终点开始依次排列
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-between弹性盒子沿主轴均匀排列，空白间距均分在相领盒子之间
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

设置主轴对齐方式

1.左对齐 flex-start

![](移动端第三天(flex布局 小兔鲜).assets/左对齐.png)

2.右对齐 flex-end

![](移动端第三天(flex布局 小兔鲜).assets/有对齐.png)

3.居中对齐 center

![](移动端第三天(flex布局 小兔鲜).assets/居中对齐.png)

4.先两侧对齐， 间隔存放 space-between;

![](移动端第三天(flex布局 小兔鲜).assets/2.png)

5.间隔存放 两侧空间小于中间 space-around;

![](移动端第三天(flex布局 小兔鲜).assets/23.png)

6.绝对平均 space0evenly

![](移动端第三天(flex布局 小兔鲜).assets/两侧对齐.png)

侧轴对齐方式

目标：使用align-items调节元素在侧轴的对齐方式

  • 修改侧轴对齐方式属性：

    • align-items(添加到弹性容器)

    • align-self:控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值作用
flex-start默认值，起点开始依次排列
flex-end终点开始依次排列
center终点开始依次排列
stretch默认值，弹性盒子沿主轴线被拉伸至铺满容器

侧轴单行对方式

单行居中align-items:center;
单行上对齐align-items:flex-start;

![](移动端第三天(flex布局 小兔鲜).assets/单行左对齐方式.png)

单行下对齐algin-items:flex-end;

![](移动端第三天(flex布局 小兔鲜).assets/单行下对齐.png)

侧轴多行行对方式

align-content: flex-end;

align-content:flex-start;

align-content:center;

align-content:space-between;

align-content:space-around;

align-content:space-evenly;

flex-end;右对齐
flex-start;左对齐
center居中对齐
space-between两侧对齐
space-around两侧小于中间间隔
space-evenly两侧等于中间间隔

换行

flex-wrap:wrap:

  • ​ flex不会换行的

  • ​ 当子元素的总宽度大于父元素的时候 不会换行

  • ​ 只会 挤压子元素的宽度

  • ​ 设置 换行属性

  • ​ flex-wrap

  • ​ flex-nowrap 不换行

<!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>换行</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 400px;
            height: 400px;
            display: flex;
            margin: 20px auto;
            /* align-items: flex-start; */
            /* justify-content: center; */
            /* align-items: center; */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;

            background-color: aqua;
        }
        span{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: red;
        }
        /* 
            默认情况下
            flex不会换行的
            当子元素的总宽度大于父元素的时候  不会换行
            只会  挤压子元素的宽度
            设置  换行属性
            flex-wrap
            flex-nowrap 不换行
        */


    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>
        <span>1</span>

    </div>

</body>
</html>

效果图

![](移动端第三天(flex布局 小兔鲜).assets/换行图片.png)

单行换行

align-items:flex-end;
多行换行
align-content:flex-end;
/* 单行换行 */
align-items: flex-start;

![](移动端第三天(flex布局 小兔鲜).assets/换行图片.png)

/* 多行换行 */
align-content: flex-start;

![](移动端第三天(flex布局 小兔鲜).assets/多行换行.png)

设置主轴方向flex-direction

值：

属性作用
row默认值从左到右
row-reverse右到左
colum上到下
colum-reverse下到上

flex 设置子项占父项宽度（高度）的比例

align-self 设置子项自己在侧轴上的对齐方式

flex-start左对齐
flex-end有对齐
center居中对齐
属性作用

子项有四个特点

默认的宽度等于内容撑开

默认的高度等于父项的高度

flex:1;设置子项的宽度

align-seft;设置 子项在侧轴上的对齐

主轴方向设置colum

默认的高度等于内容撑开

flex:1;设置子项的高度

align-seft;设置 子项在侧轴上的对齐(水平)

默认的宽度等于父项的宽度

伸缩比

目标：使用flex属性修改弹性盒子伸缩比

  • 属性 flex:值

  • 取值分类 数值(整数)

    flex:1;

注意：只占用父盒子剩余尺寸

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>index.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 270px;
        /* 
        谷歌和 edge 浏览器 没有效果
            现在edge内核也是使用谷歌的！ 
        ie和火狐有效果

        谷歌浏览器对于 大图片的 结合背景效果的时候 
        不稳定 有bug！！ 
         */
        height: 130px;

        margin: 100px auto;

        background-image: url(./baidu.png);

        /* 64 大图片的宽度处于 盒子的宽度  */
        animation: ani 3s steps(64) infinite;
      }
      @keyframes ani {
        100% {
          /* 图片的宽度 */
          background-position-x: -17280px;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

<!-- 
    1 用到 动画 steps 
    2 背景图片的位置做变化 
        水平方向做变化  （图片多大）
    3 steps 等于  大图中有几个圣诞老人
 -->

​ 谷歌和 edge 浏览器 没有效果

​ 现在edge内核也是使用谷歌的！

​ ie和火狐有效果

​ 谷歌浏览器对于 大图片的 结合背景效果的时候

​ 不稳定 有bug！！

avatar
文章
阅读
粉丝