6，前端学习-css-04

最新推荐文章于 2024-08-05 10:20:29 发布

小俞的大宝贝

最新推荐文章于 2024-08-05 10:20:29 发布

阅读量65

点赞数

分类专栏：前端学习文章标签： html 前端

本文链接：https://blog.csdn.net/dashuaigeyyds/article/details/132893005

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1. 过渡动画

一:过渡属性的解释:表示元素从初始状态变化到结束状态(状态是一直存在),不能使用在display:none和block
二:过渡属性的使用
- 1.表示参加过渡的属性
  - 属性:transition-property
  - 属性值
    - 可以在后面书写参加的属性,多个属性值用空格隔开
    - 使用英文单词all 表示全部都参与过渡
    - 默认all可以不写表示设置的属性都可以参与过渡
- 2.过渡使用的时间
  - 属性:transition-duration(持续时间)
  - 属性值
    - css中时间使用可以秒(s)或者毫秒(ms)
    - 用户体验最佳的时间是0.8s
- 3.过渡的延迟
  - 属性:transition-delay
  - 属性值: 秒数s
- 4.过渡运动的方式
  - 属性:transition-timing-function
  - 属性值
    - 法定的属性值:linear、ease、ease-in、ease-out、ease-in-out
    - 贝塞尔曲线 http:cubic-bezier.com
- 5.过渡的简写方式
  - 属性:transition
  - 属性值:过渡的属性过渡的时间延迟时间运动方式
    - 写法 transition:all 0.8s;
三:过渡使用的注意点
- 过渡的属性设置在改变的元素本身上,不可以放在hover里面
- 在过渡中只要设置了时间就可以触发过渡
- 过渡的默认运动方式是ease

    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            /* transition-property: all; */
            transition-duration: 5s;
            /* transition-delay: 3s; */
            transition-timing-function: cubic-bezier(.08,1.62,.42,-0.73)
        }
        div:hover{
            width: 1000px;
            height: 100px;
            background: pink;
        }
    </style>

<body>
    <div></div>
</body>

2. 动画

一.帧动画的解释:控制元素移动位置
二:帧动画的要素
- 1.需要声明动画
  - 在CSS样式表中创建
  - 关键字 @keyframes 帧动画的名字{设置动画的运动方式}
- 2.需要调用动画
  - 调用执行动画就是使用CSS属性(控制哪个元素运动就给哪个元素添加属性即可)
  - 设置动画的时候需要添加定位属性,并且定位的属性要设置相同
三:动画的使用方式(只要给动画设置了名字和时间,动画就可以运动起来)
- 1.动画的声明/创建的注意点
  - 使用关键字,不要写错了
  - 动画的名字建议使用语义化的英文单词,不要设置中文、特殊符号
  - 运动方式有两种
    - 单次运动 from...to 表示开始到结束
    - 多次运动百分比表示将当前的容器分成多少份进行运动
- 2.如何去调用关键帧动画(使用动画的属性)
  - animation-name 表示动画的名字动画就可以被选择
  - animation-duration 表示动画运动的时间 s/ms
  - animation-timing-function 动画的运动方式
  - animation-iteration-count:infinite 无限循环
  - animation-direction 动画的方向 normal(顺时针) reverse(反向的) alternate(先正反后)
- 3.简写方式属性:animation 属性值:动画的名字动画的时间动画的方式;

    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 200px auto;
            position: relative;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            /* 动画的名字 */
            animation-name: divMove;
            /* 动画的时间 */
            animation-duration: 3s;
            /* 动画运动的次数 */
            animation-iteration-count: infinite;
            /* 运动的方向 */
            animation-direction: reverse
        }
        /* 创建动画 */
        @keyframes divMove{
            0%{left: 0;top: 0}
            25%{left: 400px;top: 0}
            50%{left: 400px;top:400px}
            75%{left: 0;top:400px}
            100%{left: 0;top: 0}
        }
    </style>

<body>
    <section>
        <div></div>
    </section>
</body>

3. 2D/3D

3.1 css3中的变形属性：transform

CSS3中的2D属性设置

translate() 移动、平移单位是px
scale() 缩放默认值是1
rotate() 旋转单位是deg
skew() 倾斜单位是deg
perspective() 景深、视距单位是px

3.2 css3中的位移的使用

1.属性:transform
2.属性值:translate(设置位移的距离)
- translateX() 位移方向X
- translateY() 位移方向Y
3.注意
- 当需要设置两个方向的时候,可以把两个方向值写在一起 translate(x,y)
- 还可以transform:translateX() translateY()
- 位移不会脱离文档流
我们经常使用定位和translate来使内容保持垂直居中

3.3 css3中缩放属性的使用

属性值:scale(参数)
- scaleX() 宽度缩放
- scaleY() 高度缩放
- scale(x,y) 如果x和y相等的时候,可以简写成一个参数
缩放参数的情况
- 默认值为1 表示不改变
- 小于0 先缩小后放大倍数(颠倒的)
- 等于0 消失/隐藏
- 0~1 缩小倍数
- 大于1 放大倍数

3.4 原点

所有的变形属性默认都是在元素的中心点开始进行变化的

改变变形原点/基点:transform-origin
属性值:top、right、bottom、left、center
- 2D:x y
- 3D:x y z

3.5 css3中的旋转属性

1.CSS3中旋转属性的使用:transform
2.属性值:rotate(角度值deg)
- rotateX() 沿着X轴进行旋转单杠运动
- rotateY() 沿着Y轴进行旋转钢管舞
- rotate(只有一个参数) 默认是Z轴方向
3.景深效果:远小近大(视距) 有两种表达方式
- perspective:1200px 设置在父级元素
- transform:perspective(1200px) 可以设置在子级元素上
- 1200px是最佳的观察位置,建议设置在父级元素上
4.注意点
- 无论设置哪个轴向的旋转,永远都是在这个轴向的正值方向观察变化
- 设置正值表示顺时针,负值就是逆时针
5.倾斜属性值:skew(参数角度)
- skewX() 沿着X轴倾斜
- skewY() 沿着Y轴倾斜
- skew(x,y)

3.6 3D属性

一:HTML5+CSS3只能在高版本中使用
二:CSS3中的3D属性
- 1.形成3D空间(父级元素上设置)
  - 属性:transform-style
  - 属性值:flat(默认为2D空间)/preserve-3d(形成3D空间)
  - 注意:设置3D空间,浏览器不会发生任何变化,只是多了一条Z轴,可以在Z轴上设置变形属性
三:3D中的变形属性设置
- 1.位移属性
  - 2D:translate()、translateX()、translateY()
  - 3D:translateZ()、translate3D(x,y,z)
- 2.缩放属性
  - 2D:scaleX()、scaleY()、scale()
  - 3D:scaleZ()、scale3D(x,y,z) 单独使用观察没有效果,需要一起使用
- 3.旋转属性
  - 2D:roateX()、roateY()、rotate(默认就是Z轴)
  - 3D:roateZ()、rotate3D(x,y,z,角度值)
  - x,y,z表示开关设置0和1
  - rotate3D(1,0,0,60deg) => rotateX(60deg)
  - rotate3D(1,1,0,60deg) => rotateX(60deg) rotateY(60deg)
  - rotate3D(1,1,1,60deg) => rotateX(60deg) rotateY(60deg) rotateZ(60deg)
- 4.倾斜属性:没有Z轴上的变化
- 5.多个属性一起使用时候的问题
  - 旋转和位移:建议先写位移后写旋转
  - 缩放和位移:建议先写位移后写缩放
- 6.正方体的绘制:

4. 弹性盒

【重要】弹性盒的概念

1.什么是弹性盒:控制子级元素在父级元素中的排列位置
2.弹性盒的容器:设置弹性盒属性要在父级元素上,在弹性盒中会生成两条轴线(主轴和侧轴)
3.设置方法 display:flex
4.弹性盒的特点
- 在弹性盒中默认主轴方向是X轴,侧轴是Y轴
- 主轴和侧轴是相对的关系,不是绝对的,主轴可以修改
- 在弹性盒中不考虑元素类型,所有的标签都可以直接设置宽高大小
- 居中方式:给单个子级元素设置margin:auto
5.弹性盒使用的注意点 - 不会脱离文档流,不会破坏布局,不存在高度塌陷 - 定位和盒模型可以正常使用 - 浮动属性没有效果(暂且忘记)

4.1 弹性盒可以设置在父级的属性

一.修改弹性盒的主轴方向
- 1.属性:flex-direction
- 2.属性值:row 行 / column 列
二:控制子级元素在父级元素的主轴上排列方式
- 1.属性:justify-content
- 2.属性值
  - flex-start 默认值表示在主轴的开始位置
  - flex-end 表示在主轴的结束位置
  - center 表示在主轴的中间位置
  - space-between 两端对齐,其余空间自动分配
  - space-around 元素的左右间距都是相同的
  - space-evenly 所有的空间平分
三:控制子级元素在父级元素的侧轴上排列方式
- 1.属性:align-items
- 2.属性值
  - 重要 flex-start/end/center
  - 了解 baseline 默认情况下和flex-start效果是一样的
  - stretch 拉伸
四:弹性盒中换行属性(规定弹性盒子级元素大于父级元素默认是进行挤压的)
- 1.属性:flex-wrap
- 2.属性值
  - nowrap 默认值不换行
  - wrap 换行
五:控制换行之后行与行之间的间距
- 1.属性:align-content
- 2.属性值
  - flex-start 默认值行与行在开始的位置显示最常用
  - flex-end | center | space-between | space-around| space-evenly| stretch

4.2 弹性盒在子级的元素

1.设置子级元素的排列优先级
- 属性:order
- 属性值:数字,数字越大越往后显示
2.设置单个元素在侧轴上的对齐方式
- 属性:align-self
- 属性值:
  - 常用的:flex-start/flex-end/center
  - 了解的:auto表示默认,会继承父级的设置属性

4.3 flex为1

问题:在移动端的主体内容布局中,需要根据用的手机屏幕自适应并且当内容较多的时候又可以撑开解决:设置flex为1即可

属性:flex
属性值:
- 一个数字 1 2 3 4 表示当前占据几等份
- 重要的属性值:1 占据主轴上剩下的空间,当内容较多的时候空间会自动撑开显示
- 前提是一定要在弹性盒的环境下设置

一.flex作为属性出现的时候是由flex-grow、flex-shrink、flex-basis三个属性复合形成
二.三个属性的解释推算
- 1.相对于其他元素进行扩展的量
  - 属性:flex-grow
  - 属性值
    - 0 表示元素是正常显示的
    - 1 自动分配空间
- 2.相对于其他元素进行收缩的量
  - 属性:flex-shrink
  - 属性值
    - 0 改变主轴的宽高不会收缩
    - 1 改变主轴的宽高会收缩
- 3.项目的长度(width作用类似)
  - 属性:flex-basis
  - 属性值:0%~100%
三:总结三个属性的使用情况
- 默认的属性值:0 1 auto
- 重要的属性值:1 1 0% => 简写为flex:1

5. 圣杯布局

    <style>
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 100px;
            background: pink;
        }
        main{
            flex: 1;
            background: skyblue;
            display: flex;
        }
        aside{
            width: 100px;
            height: 100%;
            background: red;
        }
        section{
            flex: 1
        }
        article{
            width: 100px;
            height: 100%;
            background: green;
        }
        footer{
            height: 100px;
            background: orange
        }
    </style>
    <body>
    <header></header>
    <main>
        <aside></aside>
        <section></section>
        <article></article>
    </main>
    <footer></footer>
</body>

6. 多列布局

使用在很多文字的时候

/* 列的数量 */
column-count: 5;
/* 列的宽度 */
column-width: 200px;
/* 列与列之间的间距 */
column-gap: 1px;
/* 列的边框 */
column-rule: 1px solid red

7. 媒体查询

媒体查询的使用

1.概念:不是一个具体的属性或者属性值,只是一个概念(可以检测设备的特性从而设置不同的css样式)
2.写法:@media 设备的类型操作符号 (设备的特性){css样式}
- @media 关键字表示使用的是媒体查询(媒介)
- 设备的类型:screen、all
- 操作符号:and 连接符
- (设备的特性) max-width/min-width
- {css样式}
3.媒体查询使用的注意点
- 建议写在样式表的最下面
- 媒体查询中每个英文单词之间都需要添加一个空格
- 如果需要检测多个媒体的特性,可以设置多个and即可
- 由于电脑厂商较多,电脑设备之间存在差异,所有有微小的误差是正常的

/* 考虑的是移动端的屏幕大小 */
/* 第一种:小屏手机的代表 iphonese、iphone5 测试320px */
@media all and (max-width:320px){
html{
font-size: 12px
}
}
/* 第二种:中屏手机的代表 iphone6/7/8 测试375px */
@media all and (min-width:321px) and (max-width:375px){
html{
font-size:14px
}
}
/* 第三种:大屏手机的代表 iphone6/7/8plus 测试414px */
@media all and (min-width:376px) and (max-width:414px){
html{
font-size: 16px
}
}
/* 第四种:超大屏幕的手机代表平板、折叠手机 */
/* 考虑手机屏幕的问题,最后的媒体查询可以省略 */
@media all and (min-width:415px){
html{
font-size: 16px
}
}

8. 移动端

8.1 视口的设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

8.2 了解移动端的前提

一:了解移动端中的概念

1.ppi 像素密度苹果手机

2.dpi 像素密度安卓手机

二:网页中常用的单位有哪些

1.px 像素,绝对值单位

2.em 相对于父级计算的单位(首航缩进)

3.% 百分比单位

4.deg 角度值

三:引出移动端布局中重要的单位:rem

1.rem单位是相对于根元素 font-size进行计算的(默认都是16px)

2.如果设置盒子的大小是2rem,盒子的大小会根据屏幕的大小进行变化

3.移动端的屏幕大小都是不一样的,文字大小也应该设置不一样大小

4.考虑在不同的移动端下面设置不同的font-size

5.媒体查询可以修改不同移动端下面的font-size

四:移动端单位rem的计算

1.公式:dpr=物理像素/逻辑像素

2.已知dpr和物理像素,需要算出逻辑像素的大小

3.dpr的设置:设备像素比

- 常见的设计图640px 终端320px dpr是2

- 常见的设计图750px 终端375px dpr是2(重要)

4.简单的运算

- 设计图宽度是640px,导航的高度是88px,问在设置的时候需要给高度设置为多少? - 88px/2=44px 固定值单位（物理像素/dpr = 逻辑像素）,在每个移动上都是44px ？,移动端应该要跟随屏幕的大小进行改变

- 设置媒体查询不同的font-size的值,44px需要改成相应的rem单位

- 44px = ?rem => 44px/12px（html上的font-size的值） = 3.67rem

五:第一种移动端布局方式的总结

1.如果设计图的宽度是640px的时候,dpr为

2,运算方式:物理像素/2/相对应的font-size的值

2.如果设计图的宽度是750px的时候,dpr为2,运算方式:物理像素/2/相对应的font-size的值

8.3 rem适配移动端总结

一:第一种移动端的适配方式
- 1.原理:媒体查询结合rem适配
- 2.计算:
  - 公式:dpr=物理像素/逻辑像素
  - 依据:设计图的宽度进行决定 640px/750px => dpr为2
  - 计算:物理像素/2/font-size
- 3.优缺点
  - 优点:简单、好理解
  - 缺点:计算麻烦、有误差、每一个移动端就需要设置一套合适的媒体查询
二:第二种移动端的适配方式
- 1.使用一个新的单位:vw(viewport width)视口的宽度
- 2.1vw等于视口的百分之一()
- 3.100vw和100%的大小是否相等?
  - 在pc端滚动条是占位置的,两者之间不相等
  - 在移动端滚动条不占位置,两者相等
  - 100%可以使用移动端布局,建议使用vw
三:vw的推算过程(了解)
- 第一种情况:当设计图的宽度是640px的时候,dpr为2,终端宽度就是320px
  - 表示在移动端中320px = 100vw
  - 100vw/设计图320px的大小=每一份的大小
- 第二种情况:当设计图的宽度是750px的时候,dpr为2,终端宽度就是375px
  - 表示在移动端中375px = 100vw
  - 100vw/设计图375px的大小=每一份的大小
四:转换vw和rem单位
- 第一种种情况:当设计图的宽度是640px的时候,dpr为2,终端宽度就是320px
  - 100vw = 320px
  - 1vw = 3.2px
  - 1px = 0.3125vw(每px的占比)
  - 导航88px:88px/2=》44px*0.3125vw
  - 直接设置html{font-size:0.3125vw}
- 第二种种情况:当设计图的宽度是750px的时候,dpr为2,终端宽度就是375px
  - 100vw = 375px
  - 1vw = 3.75px
  - 1px = 0.2667vw(每px的占比)
  - 导航88px:88px/2=44rem
  - 直接设置html{font-size:0.2667vw}
五:vw单位使用的总结
- 当设计图是640px,设置html{font-size:0.3125vw} 计算方式:物理像素/2=?rem
- 当设计图是750px,设置html{font-size:0.2667vw} 计算方式:物理像素/2=?rem
  - 跟媒体查询没有任何关系
6 第三种移动端布局方式:阿里淘宝前端团队(淘宝插件)
- 1.自动的生成动态dpr,针对于750px的设计图而言
- 2.使用方法
  - 第一步需要删除文档中的视口标签
  - 需要引入外部的js文件进行计算
  - 计算方式:物理像素/100=?rem
- 3.优缺点
  - 优点:计算方便
  - 缺点:不稳定、在每个浏览器中自定义的dpr都不一样

8.4 移动端布局的总结

移动端布局的总结

1.媒体查询+rem
- 原理:检测屏幕大小根据屏幕改变相对应的字体大小
- 代码:@media all and (){}
- 缺点:计算麻烦有误差
2.vw+rem
- 原理:根据屏幕的视口进行变化
- 代码:font-size:0.2667vw(750px)
- 缺点:误差较小
- 拓展:vh、vmax、vmin 1080px=10.8vw
3.flexible插件的使用
- 阿里系软件使用的较多不需要过多研究
4.除了手写移动端还有一些其他方法实现:hotcss webApp

9 iframe

<iframe src="https://www.swiper.com.cn/demo/030-pagination.html" frameborder="0"></iframe>

在网站上有一些比较符合开发需求的效果,想办法拿下来变成自己的东西

1.HTML中有一个框架标签:iframe 引入外部的资源

2.右键查看源代码 ctrl+c/v

10. 网格布局

1.弹性盒:可以将容器分成轴向(主轴和侧轴) 控制子级元素在父级元素中的排列位置
2.网格布局:可以将容器分成行和列(X轴和Y轴) 控制子级元素在轴向的排列位置
- 容器概念:设置了形成网格的属性就是容器
- 项目概念:项目是容器的直接子级元素
3.之前学习表格,在表格中学习到了合并,行列合并的弊端是当有一个实现合并了就不能再做其他的合并操作
4.形成网格布局的属性 display:grid

10.1 用法

1.设置display:grid之后,在浏览器的控制台中可以观察到网格默认把容器分成网格
2.设置网格中的宽高大小(有几行几列需要设置几个属性值)
- grid-template-columns:列表示宽度
- grid-template-rows:行表示高度
3.设置区域划分(如何进行行列合并)
- 父级元素:grid-template-areas 属性值需要设置成多个
- 子级元素:gird-area 属性值需要和父级设置的相