coderwhy–前端知识整合包–html/css08

1、css–颜色渐变（背景颜色）

linear-gradient(0,red,blue);角度、渐变颜色一、渐变颜色二

    <style>.box{width: 100px;height: 100px;background: linear-gradient(0,red,blue);}</style>
</head>
<body><div class="box"></div>
</body>

2、有些元素无法使用transfrom

只适用于可行变元素，行内元素无效，修改display可以有效

3、高斯模糊fluter

 /* 轮播图服务 */
#top .banner .server{position:absolute;bottom: 0;left: 0;right: 0;/* width: 100%; */height: 45px;/* background-color: rgb(0,0,0,.6); *//* 滤镜 */}
#top .banner .server .blur{position: absolute;bottom: 0;top: 0;left: 0;right: 0;/* height: 45px; *//* background-color: hotpink; */background-image: url("../asset/image/lunbo1.jpg") ;background-position: center bottom;filter: blur(10px);z-index: -1;
}
#top .banner .server .wrap ul{height: 45px;line-height: 45px;}
#top .banner .server .wrap ul li{float: left;font-size: 15px;margin-right: 30px;
}<div class="banner"><a class="swiper"href="#"><img src="./asset/image/lunbo1.jpg" alt=""></a><div class="server"><div class="blur"></div><div class="wrap"><ul><li>卡拉直营</li><li>全球直产</li><li>假一赔十</li><li>假s赔十</li></ul></div></div></div>

4、无法撑起a元素原因

如果对某一个a元素内部内容在设置浮动情况下还设置了z-index，有很大可能，a元素无法撑起内容

遇到这种情况注意z-index

5、html5新增语义元素

让网页语义化，如nav、header、section、article、aside、footer等，这些元素都算块级元素

6、媒体元素video与audio

音频audio

(1)常见属性

src：媒体来源

controls：增加控制工具栏

autoplay：自动播放

muted：静音

loop：循环播放

<audio src="" controls autoplay muted loop><!--多个格式防止浏览器不识别--><source src="/.mp4"><source src="/.avi"><source src="/.webm">
</audio>

视频video

(1)常见属性

src：媒体来源

controls：增加控制工具栏

autoplay：自动播放

muted：静音

loop：循环播放

<video src="" controls autoplay muted loop><!--多个格式防止浏览器不识别--><source src="/.mp4"><source src="/.avi"><source src="/.webm">
</video>

7、html5–input元素扩展

placeholder:输入框站位文字

multiple:多个值

autofocus:最多输入内容（自动聚焦）

8、flex布局（重要，比浮动好用，老板不支持）

(1)概念

开启flex布局元素叫 flex container

flex container里面子元素叫flex items

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tps2Lib3-1600922672614)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200727182546983.png)]

<!--开启flex布局，flex是块级元素，inline-flex是行内--><style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;}.item2{background-color: rebeccapurple;}.item3{background-color: lawngreen;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

(2)flex-container属性

flex direction决定主轴方向，但是这个属性可以改变flex布局块内主轴方向

row：主轴方向默认是浏览器布局方向（从左到右）

row-reverse：是浏览器布局方向（从右到左）

column：是浏览器布局方向（从上到下）

column-reverse：是浏览器布局方向（从下到上）

<style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;flex-direction: row-reverse;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;}.item2{background-color: rebeccapurple;}.item3{background-color: lawngreen;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

（3）justify-content，决定主轴上对齐方式

flex-start:默认值，在开始位置对齐

flex-end:main end对齐

center：居中对齐，不需要margin 0 auto什么的

space-between：flex-items之间距离相等，main-start、end两端对齐

spcae-evenly：flex-items之间距离相等，main-start、end跟前面相等

space-around：flex-items之间距离相等，，main-start、end变为前面一半

    <style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;}.item2{background-color: rebeccapurple;}.item3{background-color: lawngreen;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

（4）align-items，flex-items在cross axis交叉轴对齐方式

noraml:早弹性布局效果和stretch一致

stretch: 当flex-items在cross axis方向上的size为auto时，会自动填充到flex container

flex-start: 与cross start对齐

flex-end: 与cross end对齐

center: 居中对齐

baseline: 与基线对齐，且不是最后一行而是第一行

  <style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;align-items: center;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;height: 30px;}.item2{background-color: rebeccapurple;height: 60px;}.item3{background-color: lawngreen;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

（5）flex-wrap,修改flex-item一行显示格式


<!--没有该属性时--><style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;align-items: center;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;/* height: 30px; */}.item2{background-color: rebeccapurple;/* height: 60px; */}.item3{background-color: lawngreen;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body><!--有改属性--><style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;align-items: center;flex-wrap: wrap;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;/* height: 30px; */}.item2{background-color: rebeccapurple;/* height: 60px; */}.item3{background-color: lawngreen;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

（6）flex-flow,缩写属性=flex-direction +flew-wrap

flex-flow:row wrap

取值跟上面的fle-wrap一直

algin-content,决定多行flex-items在cross axis对齐方式，用法跟justify-content类似，常用于多行属性设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R0ZpSFFF-1600922672617)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200727223352988.png)]

(7)flex-items属性（flex布局里的所有子元素都被认为是flex-items）

order,决定item排布顺序，值越小越靠前

    <style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;/* align-items: center; *//* flex-wrap: wrap; */align-content: center;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;/* height: 30px; */order: 20;}.item2{background-color: rebeccapurple;/* height: 60px; */order: 23;}.item3{background-color: lawngreen;order: 19;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

align-self，会覆盖你父元素的algin-items属性值，为单独flex-item设置

    <style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;align-items: center;/* flex-wrap: wrap; */align-content: center;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;height: 30px;order: 20;}.item2{background-color: rebeccapurple;height: 60px;order: 23;}.item3{background-color: lawngreen;align-self: baseline;order: 19;}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

flex-grow，根据数字一行数字之和等分给所有行内元素,也支持小数

小数之和没有大于1不会沾满全部空间，分发按照小数乘以总宽度去分配

    <style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;/* flex-direction: row-reverse; */justify-content: flex-end;/* align-items: center; *//* flex-wrap: wrap; */align-content: center;}.item{width: 50px;height: 50px;text-align: center }.item1{background-color: bisque;height: 30px;/* order: 20; */flex-grow: 1;}.item2{background-color: rebeccapurple;height: 60px;flex-grow: 1;/* order: 23; */}.item3{background-color: lawngreen;align-self: baseline;flex-grow: 3;/* order: 19; */}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

flex-shrink，收缩，当一行内不够撑开所有元素时可以一试，同样也可以是小数

如果小数之和没超过1，每个item收缩比例size为

item超过container的size 乘 sum 乘收缩比例/flex items收缩比例之和
收缩比例=shrink*item的baseline
basesize就是item放入container之前的size

    <style>.box{width: 200px;height: 200px;background-color: aquamarine;display:flex;justify-content: flex-end;align-content: center;}.item{width: 100px;height: 50px;text-align: center }.item1{background-color: bisque;flex-shrink: 2;/* w==100-100*2/8 */}.item2{background-color: rebeccapurple;flex-shrink: 2;/* w==100-100*4/8 */}.item3{background-color: lawngreen;flex-shrink: 4;/* w==100-100*4/8 */}</style>
</head>
<body><div class="box"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div></div>
</body>

flex-basis，用来设置主轴mainaxis方向上的大小（base-size）

用来决定一个item在主轴上面的大小,优先级最高，

优先级：

max-width\max-height\min-width\minheight
flex-basis
width\height
内容本身的size

(4)要点补充

a、默认情况下，所有flex-item都会在同一行显示

b、缩写属性flex：flex-grow||flex-shrink||flex-basis

单值语法无单位数为flex-grow
- 有效宽度值flex-basis
  
  关键字none auto initial
双值语法
- 第二值必为以下其一一个无单位数为shrinl
- 一个有效宽度值basis
三值语法
- grow无单位数
- shrink无单位数
- basis有效宽度值

9、网络字体使用

    <style>@font-face {font-family: "kai";src: url("D:\Github\coderwhy_html\html基本元素\test\font\FZSTK.TTF") }p{font-family: "kai";}</style>
</head>
<body><p>jizj时间简史</p>
</body>

10、字体图标和阿里icon库

两种用法

直接引用字体格式内容

从icon下载所需图表，然后将icon文件的不同格式复制到font中，然后将阿里icon库里对应的图表代码复制到页面里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29VxhzUz-1600922672621)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728220004449.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ICRivPx-1600922672624)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728220024867.png)]

    <style>@font-face {font-family: "kai";src: url("./font/iconfont.svg"), url("./font/iconfont.ttf"),url("./font/iconfont.woff"),url("./font/iconfont.woff2");}p{font-family: "kai";}</style>
</head>
<body><p></p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjoPfsym-1600922672628)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728215922668.png)]

这玩意看着是图片但本质为字体，请注意，用字体设置方式控制此图标变化，字体能设置的都能使用

导入字体的css样式，然后通过字体对应代码和设置该css里class样式使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdEfZQHa-1600922672630)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728221048233.png)]

 <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/iconfont.css"><style>/* @font-face {font-family: "kai";src: url("./font/iconfont.svg"), url("./font/iconfont.ttf"),url("./font/iconfont.woff"),url("./font/iconfont.woff2");} */p{font-family: "kai";}</style>
</head>
<body><p class="iconfont"></p><span class="iconfont icon-flow "></span>
</body>

优点

放大不失真
可以任意切换颜色
使用多个图标文件相对其他图标较小

11、html5–使用图片方式

img元素
- 不能实用精灵图
background-image
- 装饰
- 先加载css-url
- 能实用精灵图
iconfont字体图标
- 放大不失真
- 可以任意切换颜色
- 使用多个图标文件相对其他图标较小，节省空间

12、css–关键帧动画

（1）跟transition的过渡动画不同，transition只定义了相当于关键帧的第一针和最后一针

（2）动画若有多种变化可以使用关键帧动画

（3）关键帧动画使用规则

使用@keyframes来定义多个变化状态并使用animation-name来声明匹配
- 首先使用@keyframes创建一个规则
- 其次使用@keyframes百分比定义各个阶段样式
- 通过animation将动画添加到属性上
  - animation值（按顺序表现）：
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lr3Vdkar-1600922672633)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728224211529.png)]

    <style>.one{width: 200px;height: 200px;background-color: aquamarine;}.one:hover{animation: test1 2s linear,test2 4s linear;/*       执行的关键帧动画名字  持续时间  展示形式 可以用，写多个动画，但是这不同的动画不能用同一个属性，否则后一个动画会层叠掉前一个动画的同名属性值，只能表现出后一个动画的效果,比如现在*/}@keyframes test1 {0%{transform:  translate(0,0);opacity: 0;}25%{transform:  translate(2,200px);opacity: 2;}50%{transform:  translate(4,50px);opacity: 10;}75%{transform:  translate(0,200px);opacity: 0.2;}100%{transform:  translate(0,0);opacity: 0;}}@keyframes test2 {0%{transform:  scale(2,2);opacity: 0;}25%{transform:  scale(2,200px);opacity: 2;}50%{transform:  scale(4,50px);opacity: 10;}75%{transform:  scale(0,200px);opacity: 0.2;}100%{transform:  scale(0,0);opacity: 0;}}</style>
</head>
<body><div class="one"></div>
</body>

13、css–3d动画

实现方式：transform-style：presserve-3d

perspective

       }100%{transform:  translate(0,0);opacity: 0;}}@keyframes test2 {0%{transform:  scale(2,2);opacity: 0;}25%{transform:  scale(2,200px);opacity: 2;}50%{transform:  scale(4,50px);opacity: 10;}75%{transform:  scale(0,200px);opacity: 0.2;}100%{transform:  scale(0,0);opacity: 0;}}
</style>

</div>

```

13、css–3d动画

实现方式：transform-style：presserve-3d

perspective

js实现的3d库：three.js